{"componentChunkName":"component---src-templates-post-js","path":"/blog/cors-anywhere","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🌈 跨域任意门","tips":[],"categories":["code"],"datetime":"2020-12-17 00:17:36","noFooter":false,"description":"很多时候的小的个人项目需要一些数据，开发阶段只需要很少的请求别人的数据，也不值当收集或者搭建服务，就想着直接从客户端请求，但是大部分的服务都有跨域问题，常见的解决方案是服务器代理一下，今天把这种方案整理一下，做的全面一些方便使用。","plainTextDescription":"很多时候的小的个人项目需要一些数据，开发阶段只需要很少的请求别人的数据，也不值当收集或者搭建服务，就想着直接从客户端请求，但是大部分的服务都有跨域问题，常见的解决方案是服务器代理一下，今天把这种方案整理一下，做的全面一些方便使用。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2045a227%20227%200%20001%2046c-1%201%203%201%2013%201%2012%200%2014%200%2014-2%201-2%200-3-8-3-7%200-8%200-7-2%201-1%201-1-1-2-1-2-1-2%205-2l20%201c2%202%207%201%207-1%201-1%201-1%201%201s0%202%202%202l10-2%207-1h2l2-1c0-3-1-3-3-1-1%201-2%201-2-3l-2-5c-2-2-1-7%201-7v-2l1-1-1-1-2-2c0-2%202-3%202%200%201%203%208-6%208-9%200-7%202-8%2011-5l5%201c1%200%208%204%2010%207l4%202-1%202c-2%202-2%202-1%204%204%202%208%201%205-2v-2h1l1-1c1-2%201-2-1-4-1-1-1-1%202-1l2%202c0%203%2010-1%2013-5l2-1%202-2c1-4%203-5%203-1l1%203%202-3%201-2a221%20221%200%20011%206h8l3-1%208-3c1%201%204-2%204-4l-2-1-1-1c-1-1-1-1-3%201h-3c-1-2-6-3-7-2-2%201-4%201-4-2%200-2-3-6-5-6s-1-2%202-5c4-3%203-6%200-4-3%200-3-1%202-10l4-9H0v45M298%202c0%202%202%207%204%209l2%203-2-1c-3-4-4-4-3-1l-1%202-1-1c0-1-1-2-2-1l-4-1c-2-2-6-1-6%202l-2%201-2-1c0-2-8%204-11%208-4%205-5%209-2%2013l1%205c-1%201%200%202%201%203h2c0-1%205%201%207%203%202%201%203%200%205-7%200-3%204-6%205-6v3l1%201c-3%200%202%203%205%203h4l-4%201c-6%200-7%205-1%207l3%202%203%201%205%201h3c0-1%203-1%204%201l2%201%201%201c0%203%203%204%206%203%205-2%207-2%207%200h1l4-1h4l-3%201-5%202h-1l-1-1-1%202%201%201%201%202-2%202c-2%200-3-1-3-2l-4-3c-2%200%200%204%203%207s4%203%207%203l2%201%201%201c2%200%201-4-1-5-4-1-4-2-1-2%204%200%207%208%204%209l-2%202%202%201h2c0%201%2010%204%2015%204%204%200%205%200%204-1%200-2%202-3%203-1l2%201%203%201h3l1%201%201-1c0-3%202-4%204-3%203%202%203%203-1%203s4%202%2010%202l5%201c0%201-13%202-21%201l-3%201%208%201h6l-2%201-6%202-4%202h9c8%200%209%200%209-2l2-3c2-1%202-1%202%202l-1%203h15V0h-51c-50%200-51%200-51%202M19%2045c-2%202-3%202-3%201%200-2-2-3-4-1-1%203-1%206%201%206l3-1h5c4%200%208%203%209%206%201%202%201%202%202%201h1c-1%202%201%204%203%204v2h9l3-1c3%200%205-2%202-3l-3-2c-2%200-2-1%201-3%204-3%205-6%201-4h-6c0%202-2%201-3-1l-1-1v1l-3%201-3-1h-1c-1%200-2-1-1-2%200-2%200-3-3-4-5-2-6-1-9%202'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/0979f/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/9e575/banner.jpg 500w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/79449/banner.jpg 1000w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0979f/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/14e3c/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/7fe04/banner.webp 500w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/d619e/banner.webp 1000w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14e3c/banner.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}},"bannerCredit":null,"slug":"/blog/cors-anywhere","tags":["前端","整理"]},"headings":[{"value":"为什么","depth":2},{"value":"结果","depth":2},{"value":"原理和规范","depth":2},{"value":"proxy 的原理","depth":3},{"value":"node-http-proxy 的原理","depth":3},{"value":"Serverless 下的转发","depth":3},{"value":"开发","depth":2},{"value":"技术","depth":2},{"value":"注意问题：","depth":2},{"value":"开发和部署","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"cors-anywhere\",\n  \"title\": \"🌈 跨域任意门\",\n  \"date\": \"2020-12-17 00:17:36\",\n  \"author\": \"Ubug\",\n  \"description\": \"很多时候的小的个人项目需要一些数据，开发阶段只需要很少的请求别人的数据，也不值当收集或者搭建服务，就想着直接从客户端请求，但是大部分的服务都有跨域问题，常见的解决方案是服务器代理一下，今天把这种方案整理一下，做的全面一些方便使用。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"前端\", \"整理\"],\n  \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"PS: \\u8DE8\\u57DF\\u8B66\\u544A\\u662F\\u6D4F\\u89C8\\u5668\\u5B89\\u5168\\u7684\\u5F88\\u91CD\\u8981\\u673A\\u5236\\uFF0C\\u4EE3\\u7406\\u548C\\u8F6C\\u53D1\\u670D\\u52A1\\u5BF9\\u4E8E\\u670D\\u52A1\\u63D0\\u4F9B\\u8005\\u662F\\u5F02\\u5E38\\u8BBF\\u95EE\\u884C\\u4E3A\\uFF0C\\u5982\\u679C\\u5BF9\\u76EE\\u7684\\u670D\\u52A1\\u5668\\u6545\\u610F\\u9690\\u85CF\\u6765\\u6E90\\u4E5F\\u662F\\u4E00\\u79CD\\u975E\\u6CD5\\u884C\\u4E3A\\u3002\\u6240\\u4EE5\\u867D\\u7136\\u6CA1\\u6709\\u6CD5\\u5F8B\\u660E\\u786E\\uFF0C\\u4F46\\u662F\\u9700\\u8981\\u9075\\u5FAA\\u4E0D\\u80FD\\u5927\\u89C4\\u6A21\\u6D41\\u91CF\\u52AB\\u6301\\uFF0C\\u4E0D\\u80FD\\u4ECE\\u4E8B\\u975E\\u6CD5\\u6D3B\\u52A8\\uFF0C\\u5FC5\\u987B\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Origin\"), \" \\u6216\\u8005 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"X-Requested-With\"), \" \\u6765\\u58F0\\u660E\\u6765\\u6E90\\u7B49\\u7EC5\\u58EB\\u6761\\u6B3E\\u3002\\u672C\\u6587\\u90E8\\u7F72\\u7684\\u670D\\u52A1\\u4E5F\\u9075\\u5FAA\\u4E86\\u8FD9\\u4E2A\\u9650\\u5236\\u3002\")), mdx(\"h2\", null, \"\\u4E3A\\u4EC0\\u4E48\"), mdx(\"p\", null, \"\\u5F88\\u591A\\u65F6\\u5019\\u7684\\u5C0F\\u7684\\u4E2A\\u4EBA\\u9879\\u76EE\\u9700\\u8981\\u4E00\\u4E9B\\u6570\\u636E\\uFF0C\\u6BD4\\u5982\\u81EA\\u5DF1\\u7684\\u9B54\\u955C\\u9879\\u76EE\\u6DFB\\u52A0\\u5929\\u6C14\\u4FE1\\u606F\\u3001\\u4E2A\\u4EBA\\u5DE5\\u4F5C\\u6D41\\u6536\\u96C6\\u5916\\u94FE\\u548C\\u6807\\u9898\\u529F\\u80FD\\u3001\\u58A8\\u6C34\\u5C4F\\u65F6\\u949F\\u6DFB\\u52A0\\u7A7F\\u8863\\u6307\\u6570\\u7B49\\u4FE1\\u606F\\u3002\\u56E0\\u4E3A\\u662F\\u5F00\\u53D1\\u6216\\u8005\\u4E2A\\u4EBA\\u9700\\u6C42\\uFF0C\\u6240\\u4EE5\\u53EA\\u9700\\u8981\\u5F88\\u5C11\\u7684\\u8BF7\\u6C42\\u516C\\u5F00\\u7684\\u670D\\u52A1\\u6570\\u636E\\uFF0C\\u6BD4\\u5982\\u5929\\u6C14\\u7F51\\u3001\\u89E3\\u6790 HTML \\u7B49\\uFF0C\\u5373\\u65F6\\u73B0\\u5728\\u4E91\\u51FD\\u6570\\u5F88\\u65B9\\u4FBF\\uFF0C\\u4F46\\u662F\\u4E5F\\u4E0D\\u503C\\u5F53\\u6536\\u96C6\\u6216\\u8005\\u642D\\u5EFA\\u670D\\u52A1\\u3002\"), mdx(\"p\", null, \"\\u4E8E\\u662F\\u5C31\\u60F3\\u7740\\u76F4\\u63A5\\u4ECE\\u5BA2\\u6237\\u7AEF\\u8BF7\\u6C42\\uFF0C\\u4F46\\u662F\\u5927\\u90E8\\u5206\\u7684\\u670D\\u52A1\\u90FD\\u6709\\u8DE8\\u57DF\\u95EE\\u9898\\uFF0C\\u5E38\\u89C1\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u662F\\u670D\\u52A1\\u5668\\u7B80\\u5355\\u8F6C\\u53D1\\u4EE3\\u7406\\u4E00\\u4E0B\\uFF0C\\u4ECA\\u5929\\u628A\\u8FD9\\u79CD\\u65B9\\u6848\\u6574\\u7406\\u4E00\\u4E0B\\uFF0C\\u505A\\u6210\\u670D\\u52A1\\u65B9\\u4FBF\\u81EA\\u5DF1\\u4E2A\\u4EBA\\u4F7F\\u7528\\uFF0C\\u5F88\\u4E0D\\u503C\\u5F97\\u8BF4\\uFF0C\\u5C31\\u5F53\\u662F\\u8BB0\\u5F55\\u4E86\\u3002\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/talks/#%F0%9F%93%A0%20%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%BB%A3%E7%90%86\"\n  }, \"\\u65E9\\u4E4B\\u524D\\u6536\\u96C6\\u7684\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7406\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"547px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e36a80eccb31e10ca7e5fc02eb40ecee/faff8/before.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62.934362934362944%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABcElEQVQ4y41SW26DMBDMMaJiDOZpoBBIiigt4hxN25/mI7n/Caa7m0eJGqJ8DB7tekezYxae50FrDT7DMBREUSSI4xi+71/6j2DBH8dx0NQrfH994Ge3w+d2i/1+j8PhgHEcsVwuRfhhQXZgjI8gMIRAhs9ujTE3Hc65FkFXK2RJB2sLVFVJp0WSJHBdd3bwrqDWLsIgJ2eG4IlDhlJKBln4jHNtTvTokC6maYy+7wVVVaEoCqzXazRNg2EY0LYt6rpG13UShUsmbolOMgyucmOHnClzrnG2zLkmw5rmPD2/cmAs8vQdNmmRpZ2gsAPVeuKvdL6hzEbhNtncX5kb7CCzlKNnjpA8gxOmPJD+3ONMMkwopw1dUFDuE9WcE6b8Grce5+LQ9yN66QJRmCOJKuIZ8eLC4/BZeow4LBFHJQmYuUfh3yZFbjmfFznTuCGsKbuORFeSG9cs1TLOmcDr/xP8s+2eVlHHNbWarKweXvkXFnpuICUY4M4AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"客户端代理\",\n    \"title\": \"客户端代理\",\n    \"src\": \"/static/e36a80eccb31e10ca7e5fc02eb40ecee/faff8/before.png\",\n    \"srcSet\": [\"/static/e36a80eccb31e10ca7e5fc02eb40ecee/2c191/before.png 259w\", \"/static/e36a80eccb31e10ca7e5fc02eb40ecee/86b01/before.png 518w\", \"/static/e36a80eccb31e10ca7e5fc02eb40ecee/faff8/before.png 547w\"],\n    \"sizes\": \"(max-width: 547px) 100vw, 547px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u5BA2\\u6237\\u7AEF\\u4EE3\\u7406\"), \"\\n  \")), mdx(\"p\", null, \"\\u80FD\\u591F\\u6EE1\\u8DB3\\u5076\\u5C14\\u4F7F\\u7528\\uFF0C\\u4F46\\u662F\\u56E0\\u4E3A\\u662F\\u5916\\u56FD\\u53CB\\u4EBA\\u90E8\\u7F72\\u7684\\uFF0C\\u670D\\u52A1\\u4E0D\\u592A\\u7A33\\u5B9A\\uFF0C\\u4E00\\u4E2A 2kB \\u7684\\u6570\\u636E\\u8BF7\\u6C42\\u65F6\\u95F4\\u6162\\u7684\\u8BDD\\u5C31\\u8981 5s\\uFF0C\\u6BD5\\u7ADF\\u6570\\u636E\\u4ECE\\u5BA2\\u6237\\u7AEF\\u5230\\u56FD\\u5916\\u4EE3\\u7406\\u5230\\u56FD\\u5185\\u56DE\\u5230\\u56FD\\u5916\\u6700\\u540E\\u8FD4\\u56DE\\u5BA2\\u6237\\u7AEF\\uFF0C\\u4F53\\u9A8C\\u7ECF\\u5E38\\u51FA\\u73B0\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u597D\\u5728\\u5F00\\u6E90\\u670D\\u52A1\\uFF0C\\u5B8C\\u5168\\u53EF\\u4EE5\\u5728\\u81EA\\u5DF1\\u7684\\u670D\\u52A1\\u5668\\u4E0A\\u642D\\u5EFA\\uFF0C\\u4F46\\u662F\\u81EA\\u5DF1\\u642D\\u5EFA\\u8FD8\\u8981\\u7EF4\\u62A4\\uFF0C\\u6BD5\\u7ADF\\u54EA\\u5929\\u670D\\u52A1\\u5B95\\u673A\\u4E0D\\u77E5\\u9053\\uFF0C\\u65F6\\u95F4\\u957F\\u4E86\\u4E5F\\u4F1A\\u5FD8\\u8BB0\\uFF0C\\u6240\\u4EE5\\u4E0D\\u6562\\u5F00\\u5751~~\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u8F6C\\u5FF5\\u4E00\\u60F3\\uFF0C\\u5C31\\u662F\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u8F6C\\u53D1\\u670D\\u52A1\\uFF0C\\u4E5F\\u4E0D\\u8981\\u5B58\\u50A8\\u3001\\u4E5F\\u4E0D\\u9700\\u8981\\u72B6\\u6001\\u3001\\u6700\\u591A\\u52A0\\u4E2A\\u9274\\u6743\\uFF0C\\u6240\\u4EE5\\u7528 serverless \\u5C31\\u5B8C\\u5168\\u53EF\\u4EE5\\u6EE1\\u8DB3\\uFF0C\\u4E8E\\u662F\\u5F00\\u641E\\u3002\"), mdx(\"h2\", null, \"\\u7ED3\\u679C\"), mdx(\"p\", null, \"\\u6700\\u540E\\u6548\\u679C\\u6539\\u8FDB\\u5F88\\u591A\\uFF0C3.62s -> 157ms\\uFF0C\\u8BF7\\u6C42\\u80FD\\u767E\\u6BEB\\u79D2\\u7EA7\\u8FD4\\u56DE\\uFF0C\\u4F53\\u9A8C\\u8981\\u597D\\u592A\\u591A\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"530px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c3cbba7b0543db5b7f0d4080deed519c/b4999/vs.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"21.62162162162162%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsSAAALEgHS3X78AAAA5klEQVQY0z2PzW6DMBCEeRTEj0FYJBia8hsISWojQCC1qjhxgPd/h+nahx4+7XrHOx5b3z+/aNsel2uKRGS4JhnVD9PrGkUxWBAhCLmhf76RpjcIfkFzKyC7J+rqTvMvo1vHcUBKiXGasK4rlkWzYKKzpixLMkiRZRk452CMQYQh5OtltL7tMD56CpLAdV1Y+75jGAYopShpay7leW6qpq5rNE1jtDiO4XoeOAswkMn9M8ejKKCor6oKgkyt8zyxbRvmeUZCA9u24dGSfk3jOM4/vu+bhAElnMcJtU7YdeYnUioIkeIPUKSE58XB3KUAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"效果前后\",\n    \"title\": \"效果前后\",\n    \"src\": \"/static/c3cbba7b0543db5b7f0d4080deed519c/b4999/vs.png\",\n    \"srcSet\": [\"/static/c3cbba7b0543db5b7f0d4080deed519c/2c191/vs.png 259w\", \"/static/c3cbba7b0543db5b7f0d4080deed519c/86b01/vs.png 518w\", \"/static/c3cbba7b0543db5b7f0d4080deed519c/b4999/vs.png 530w\"],\n    \"sizes\": \"(max-width: 530px) 100vw, 530px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6548\\u679C\\u524D\\u540E\"), \"\\n  \")), mdx(\"h2\", null, \"\\u539F\\u7406\\u548C\\u89C4\\u8303\"), mdx(\"h3\", null, \"proxy \\u7684\\u539F\\u7406\"), mdx(\"p\", null, \"\\u4EE3\\u7406\\u548C\\u8F6C\\u53D1\\u90FD\\u662F\\u63CF\\u8FF0\\u6574\\u4E2A\\u5B9E\\u73B0\\u7684\\uFF0C\\u5B9E\\u9645\\u4E0A\\u7684\\u5904\\u7406\\u4E5F\\u5C31\\u662F\\u9488\\u5BF9 HTTP \\u7684\\u6539\\u9020\\u800C\\u5DF2\\uFF0C\\u6BD5\\u7ADF HTTP \\u534F\\u8BAE\\u90FD\\u662F\\u57FA\\u4E8E\\u6587\\u672C\\u7684\\uFF0C\\u5B9E\\u73B0\\u4E0A\\u4E5F\\u662F\\u5305\\u88C5\\u8BF7\\u6C42\\u548C\\u54CD\\u5E94\\uFF0C\\u9700\\u8981\\u4FEE\\u6539\\u7684\\u4E5F\\u5C31\\u662F header \\u90A3\\u4E9B\\u5B57\\u6BB5\\uFF0C\\u628A\\u4EE3\\u7406\\u4EBA\\u540C\\u65F6\\u5F53\\u670D\\u52A1\\u7AEF\\u548C\\u5BA2\\u6237\\u7AEF\\u3002\\u6574\\u4E2A\\u8FC7\\u7A0B\\u5F88\\u50CF\\u662F\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u62FF\\u5230\\u5BA2\\u6237\\u7AEF\\u7684\\u8BF7\\u6C42\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u62FF\\u5230 headers \\u548C query data\\uFF0C\\u6839\\u636E\\u9700\\u8981\\u5904\\u7406\\u8FD9\\u4E9B\\u6570\\u636E\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5E26\\u7740\\u8FD9\\u4E9B \\u6570\\u636E \\u5411\\u771F\\u5B9E\\u76EE\\u6807\\u53D1\\u9001\\u8FD9\\u4E2A\\u8BF7\\u6C42\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u62FF\\u5230\\u771F\\u5B9E\\u670D\\u52A1\\u7684\\u54CD\\u5E94\\uFF0C\\u6839\\u636E\\u9700\\u8981\\u5904\\u7406 response \\u7684 header \\u548C data\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8FD4\\u56DE\\u7ED9\\u5BA2\\u6237\\u7AEF\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u4E5F\\u80FD\\u770B\\u5230\\uFF0C\\u5982\\u679C\\u8F6C\\u53D1\\u7684\\u662F\\u6CA1\\u6709\\u7279\\u522B\\u52A0\\u5BC6\\u7684\\u6570\\u636E\\uFF0C\\u90A3\\u4E48\\u5C31\\u7B97\\u662F SSL \\u4E2D\\u95F4\\u4EE3\\u7406\\u4E5F\\u5B8C\\u5168\\u662F\\u80FD\\u591F\\u62FF\\u5230\\u5168\\u90E8\\u7684\\u6570\\u636E\\u7684\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E5F\\u662F\\u4E0D\\u8981\\u7528\\u975E\\u53EF\\u4FE1\\u4EE3\\u7406\\u7684\\u539F\\u56E0\\uFF0C\\u4E5F\\u662F\\u6211\\u4E0D\\u628A\\u6211\\u8FD9\\u4E2A\\u4EE3\\u7406\\u5C55\\u793A\\u51FA\\u6765\\u7684\\u539F\\u56E0\\u3002\"), mdx(\"p\", null, \"Proxy \\u4E00\\u822C\\u90FD\\u548C Proxy Server \\u4E00\\u8D77\\u8BF4\\uFF0C\\u6BD5\\u7ADF\\u5FC5\\u987B\\u662F\\u4E00\\u4E2A\\u670D\\u52A1\\u624D\\u80FD\\u79F0\\u4E4B\\u4E3A http/ws \\u4EE3\\u7406\\uFF0C\\u672C\\u8D28\\u4E0A\\u8BF4\\u767D\\u4E86\\u4E5F\\u90FD\\u662F\\u8F6C\\u53D1\\u8BF7\\u6C42\\uFF0C\\u4E2D\\u95F4\\u4EBA\\u62FF\\u5230\\u8BF7\\u6C42\\uFF0C\\u6839\\u636E\\u884C\\u4E3A\\u76EE\\u6807\\uFF0C\\u53EF\\u4EE5\\u662F\\u6709\\u72B6\\u6001\\u6216\\u8005\\u65E0\\u72B6\\u6001\\u7684\\u3002\"), mdx(\"h3\", null, \"node-http-proxy \\u7684\\u539F\\u7406\"), mdx(\"p\", null, \"\\u6211\\u4E0A\\u9762\\u8BF4\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cors-anywhere\"), \" \\u4E3B\\u8981\\u4F7F\\u7528\\u5230\\u4E86 node-http-proxy \\u7684\\u5E93\\uFF0C\\u5927\\u6982\\u7FFB\\u4E86\\u4E00\\u4E0B node-http-proxy \\u7684\\u4EE3\\u7801\\uFF0C\\u56E0\\u4E3A\\u8FD8\\u6D89\\u53CA\\u5230 ws \\u548C server \\u7684\\u4E1C\\u897F\\uFF0C\\u629B\\u51FA\\u53BB\\u4E4B\\u540E\\u4E5F\\u5C31\\u4E24\\u4E2A\\u6587\\u4EF6 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"web-income.js\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"web-outcome.js\")), mdx(\"p\", null, \"\\u6CA1\\u51E0\\u884C\\u4EE3\\u7801\\uFF0C\\u5904\\u7406\\u4E86\\u5F88\\u591A\\u8FB9\\u754C\\u6761\\u4EF6\\uFF0C\\u4F46\\u662F\\u91CC\\u9762\\u6700\\u7EC8\\u8C03\\u7528\\u7684\\u4E5F\\u662F http/https \\u5305\\uFF0C\\u989D\\u5916\\u5904\\u7406\\u4E86 redirect\\u3001\\u4EE5\\u53CA headers \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"x-forwarded\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"host\"), \" \\u548C cookies \\u7B49\\u5185\\u5BB9\\u3002\"), mdx(\"h3\", null, \"Serverless \\u4E0B\\u7684\\u8F6C\\u53D1\"), mdx(\"p\", null, \"\\u4EE3\\u7406\\u670D\\u52A1\\u5668\\u5DF2\\u7ECF\\u6709\\u5F88\\u591A\\u73B0\\u6210\\u7684\\u8F6E\\u5B50\\u4E86\\uFF0Cnginx \\u7B80\\u5355\\u914D\\u7F6E\\u4E0B\\u5C31\\u80FD\\u5B9E\\u73B0\\uFF0Cnode-http-proxy \\u4E5F\\u4E0D\\u9700\\u8981\\u51E0\\u884C\\u4EE3\\u7801\\uFF0C\\u4F46\\u662F\\u8FD9\\u4E9B\\u524D\\u63D0\\u90FD\\u662F server \\u9700\\u8981\\u8FD0\\u884C\\u670D\\u52A1\\uFF0C\\u76D1\\u542C\\u7AEF\\u53E3\\uFF0C\\u800C\\u6211\\u53EA\\u60F3\\u8981\\u4E00\\u4E2A\\u7B80\\u5355\\u7684 serverless \\u5C31\\u884C\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u6700\\u7B80\\u5355\\u7684\\u5C31\\u662F\\u4E00\\u4E2A\\u8BF7\\u6C42\\u8F6C\\u53D1\\u51FD\\u6570\\u5C31\\u884C\\u4E86\\uFF0C\\u7F51\\u5173\\u62FF\\u5230\\u6211\\u7684\\u8BF7\\u6C42\\uFF0C\\u8C03\\u8D77\\u6211\\u7684\\u4E91\\u51FD\\u6570\\uFF0C\\u4E91\\u51FD\\u6570\\u83B7\\u5F97\\u76EE\\u6807 url \\u548C\\u53C2\\u6570\\u7B49\\uFF0C\\u5411\\u76EE\\u6807 url \\u53D1\\u9001\\u8BF7\\u6C42\\uFF0C\\u83B7\\u5F97\\u54CD\\u5E94\\uFF0C\\u5C06\\u54CD\\u5E94\\u8FD4\\u56DE\\u7ED9\\u5BA2\\u6237\\u7AEF\\u3002\"), mdx(\"h2\", null, \"\\u5F00\\u53D1\"), mdx(\"h2\", null, \"\\u6280\\u672F\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u817E\\u8BAF\\u4E91\\u7684 SCF \\u548C \\u7F51\\u5173\\u670D\\u52A1\\uFF0C\\u4E0D\\u7528\\u642D\\u5EFA\\u670D\\u52A1\\u7684\\u90E8\\u5206\\uFF0C\\u914D\\u7F6E\\u5B8C\\u76F4\\u63A5\\u80FD\\u62FF\\u5230\\u53C2\\u6570\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528 node-fetch \\u4F5C\\u4E3A\\u670D\\u52A1\\u7AEF\\u7684\\u8BF7\\u6C42\\u90E8\\u5206\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5BA2\\u6237\\u7AEF\\u7684 headers \\u8FC7\\u6EE4\\u5904\\u7406\\u540E\\u4F5C\\u4E3A request header \\u8BF7\\u6C42\\u76EE\\u6807\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u76EE\\u6807\\u8FD4\\u56DE\\u7684\\u5185\\u5BB9\\uFF0Cheader \\u4F1A\\u8FC7\\u6EE4\\uFF0C\\u7136\\u540E\\u539F\\u5C01\\u4E0D\\u540C\\u8FD4\\u56DE\\u5BA2\\u6237\\u7AEF\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E0D\\u652F\\u6301 cookies \\u7684\\u72B6\\u6001\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u53BB\\u9664\\u8DE8\\u57DF\\u9650\\u5236\")), mdx(\"h2\", null, \"\\u6CE8\\u610F\\u95EE\\u9898\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8BF7\\u6C42\\u7684\\u5185\\u5BB9\\u7F16\\u7801\\u58F0\\u660E\\uFF0C\\u5728\\u8F83\\u65B0\\u7684\\u6D4F\\u89C8\\u5668\\u5DF2\\u7ECF\\u589E\\u52A0\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Accept-Encoding: gzip, deflate, br\"), \"\\uFF0C\\u7528 node-fetch \\u8F6C\\u53D1\\u6536\\u5230 br \\u7F16\\u7801\\u6570\\u636E\\u4F1A\\u51FA\\u73B0\\u4E71\\u7801\\uFF0C\\u9700\\u8981\\u5904\\u7406\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u817E\\u8BAF\\u4E91\\u51FD\\u6570\\u7684 Nodejs \\u73AF\\u5883\\uFF0C\\u5B89\\u88C5\\u4F9D\\u8D56\\u9700\\u8981\\u5168\\u90E8\\u4E0A\\u4F20\\uFF0C\\u4F46\\u662F \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"node_modules \\u9700\\u8981\\u653E\\u5230 src \\u91CC\\u9762\\uFF0Csrc \\u91CC\\u9762\\u7684\\u5185\\u5BB9\\u624D\\u4F1A\\u88AB\\u5168\\u90E8\\u4E0A\\u4F20\"), \"\\uFF0C\\u6B64\\u5904\\u6211\\u8C22\\u8C22\\u5B98\\u65B9\\u5F00\\u53D1\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"content-encoding \\u4E0D\\u80FD\\u8FD4\\u56DE\\u5230\\u5BA2\\u6237\\u7AEF\\uFF0C\\u5F71\\u54CD\\u4E91\\u51FD\\u6570\\u7684\\u96C6\\u6210\\u54CD\\u5E94\\u673A\\u5236\\uFF0C\\u4E5F\\u5C31\\u662F\\u4E91\\u51FD\\u6570\\u4F1A\\u81EA\\u52A8\\u5904\\u7406\\u8FD9\\u4E2A\\u538B\\u7F29\\uFF0C\\u4E0D\\u80FD\\u6307\\u5B9A\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Host \\u548C Origin \\u7684\\u5904\\u7406\")), mdx(\"h2\", null, \"\\u5F00\\u53D1\\u548C\\u90E8\\u7F72\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5728\\u4E91\\u51FD\\u6570\\u4E2D\\u65B0\\u5EFA\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4F7F\\u7528 event \\u6570\\u636E\\uFF0C\\u62FF\\u5230 url \\u548C headers\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u53D1\\u9001\\u8BF7\\u6C42\\uFF0C\\u62FF\\u5230\\u54CD\\u5E94\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5904\\u7406\\u54CD\\u5E94\\uFF0C\\u8FD4\\u56DE\\u7ED9\\u5BA2\\u6237\\u7AEF\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6DFB\\u52A0\\u89E6\\u53D1\\u65B9\\u5F0F\\u4E3A API \\u7F51\\u5173\\u89E6\\u53D1\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u90E8\\u7F72\\u5230\\u53D1\\u5E03\\u73AF\\u5883\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5728 API \\u7F51\\u5173\\u4FEE\\u6539\\u8DEF\\u5F84\\u3001\\u8BBE\\u7F6E\\u81EA\\u5B9A\\u4E49\\u57DF\\u540D\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6B63\\u5E38\\u63D0\\u4F9B\\u670D\\u52A1\")), mdx(\"p\", null, \"\\u4E0D\\u5F97\\u4E0D\\u8BF4\\u817E\\u8BAF\\u4E91\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u592A\\u591A\\u4E86\\uFF0C\\u5BFC\\u81F4\\u5F00\\u53D1\\u4F53\\u9A8C\\u771F\\u7684\\u4E00\\u8A00\\u96BE\\u5C3D\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u817E\\u8BAF\\u4E91\\u7684\\u6587\\u6863\\u5199\\u7684\\u662F\\u771F\\u7684\\u5F88\\u5DEE\\uFF0C\\u8981\\u60F3\\u5F04\\u660E\\u767D\\u4E00\\u4E2A\\u5165\\u53C2\\u548C\\u8FD4\\u56DE\\u7C7B\\u578B\\u8FD9\\u4E48\\u91CD\\u8981\\u7684\\u53C2\\u6570\\uFF0C\\u6123\\u662F\\u8981\\u7FFB\\u597D\\u591A\\u9875\\u624D\\u80FD\\u5728\\u89D2\\u843D\\u91CC\\u627E\\u5230\\u4E00\\u4E2A\\u4E0D\\u51C6\\u786E\\u7684\\u5B9E\\u4F8B\\uFF0C\\u5728\\u7EBF\\u7F16\\u8F91\\u3001\\u7EBF\\u4E0B\\u5F00\\u53D1\\u3001\\u81EA\\u52A8\\u5B89\\u88C5\\u4F9D\\u8D56\\u8FD9\\u51E0\\u4E2A\\u6982\\u5FF5\\u54B1\\u80FD\\u5F04\\u7EDF\\u4E00\\u4E0D\\uFF1F\\u8FDE\\u4E2A\\u9879\\u76EE\\u6839\\u76EE\\u5F55\\u90FD\\u4E0D\\u786E\\u5B9A\\u662F\\u54EA\\u4E2A\\uFF01\\uFF01 node_modules \\u9700\\u8981\\u653E\\u5230 src \\u91CC\\u9762\\u624D\\u4F1A\\u88AB\\u90E8\\u7F72\\uFF0Csrc \\u91CC\\u9762\\u7684\\u5185\\u5BB9\\u624D\\u4F1A\\u88AB\\u5168\\u90E8\\u4E0A\\u4F20\\uFF0C\\u8FD9\\u4E48\\u91CD\\u8981\\u7684\\u70B9\\u4E0D\\u8BF4\\u660E\\u4E00\\u4E0B\\u5417\\uFF0C\\u6211\\u6123\\u662F\\u5F04\\u4E86\\u4E00\\u665A\\u4E0A\\u624D\\u78B0\\u5BF9\\uFF1F\\uFF08\\u4F60\\u4EEC\\u9F13\\u6363\\u51FA\\u6765\\u8FD9\\u4E9B\\u4E1C\\u897F\\u611F\\u89C9\\u4E5F\\u662F\\u5927\\u6982\\u7387\\u6CA1\\u6709\\u5F00\\u53D1\\u6587\\u6863\\u7684\\u5427\\uFF0C\\u6240\\u4EE5\\u5199\\u4E86\\u4E00\\u5927\\u5806\\u6587\\u5B57\\u6559\\u522B\\u4EBA\\u600E\\u4E48\\u7528\\uFF0C\\u89E3\\u91CA\\u4E86\\u5F88\\u591A\\uFF0C\\u5F88\\u8D34\\u5FC3\\u7684\\u9644\\u5E26\\u4E86\\u5F88\\u591A\\u7684\\u793A\\u4F8B\\u4EE3\\u7801\\uFF0C\\u4F46\\u662F\\u6CA1\\u6709\\u5173\\u952E\\u7684\\u53C2\\u6570\\u548C\\u6570\\u636E\\u7C7B\\u578B\\uFF0C\\u4EE3\\u7801\\u4E5F\\u90FD\\u662F\\u4E0D\\u51C6\\u786E\\u7684\\uFF0C\\u5F00\\u53D1\\u8005\\u7528\\u8D77\\u6765\\u771F\\u7684\\u5F88\\u4E0D\\u653E\\u5FC3\\u554A\\u3002\\uFF09\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4EA7\\u54C1\\u5173\\u8054\\uFF0C\\u817E\\u8BAF\\u4E91\\u7684\\u8FD9\\u4E00\\u5957\\u64CD\\u4F5C\\u9700\\u8981\\u5F88\\u591A\\u7684\\u6982\\u5FF5\\u3001\\u8DF3\\u8F6C\\u70B9\\u51FB\\uFF0C\\u5149\\u8FD9\\u4E00\\u4E2A\\u670D\\u52A1\\u7F51\\u5173\\u3001\\u57DF\\u540D\\u89E3\\u6790\\u3001\\u8BC1\\u4E66\\u3001\\u4E91\\u51FD\\u6570\\uFF0C\\u6211\\u60F3\\u8981\\u81EA\\u5B9A\\u4E49\\u57DF\\u540D\\u8FD9\\u4E00\\u4E2A\\u5F00\\u53D1\\u6D41\\u7A0B\\u4E0A\\u7ED3\\u675F\\u7684\\u529F\\u80FD\\uFF0C\\u4E5F\\u662F\\u627E\\u4E86\\u4E00\\u4F1A\\u624D\\u53D1\\u73B0\\u5728\\u54EA\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8FD9\\u4E2A\\u4E1C\\u897F\\u5982\\u679C toB \\u4E5F\\u8BB8\\u6CA1\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u5982\\u679C\\u516C\\u53F8\\u9009\\u62E9\\u4E86\\u817E\\u8BAF\\u4E91\\uFF0C\\u5927\\u6982\\u7387\\u4F1A\\u6DF1\\u5165\\u7814\\u7A76\\u603B\\u7ED3\\u51FA\\u5F88\\u591A\\u6D41\\u7A0B\\u3002\\u4F46\\u662F\\u4E2A\\u4EBA\\u5F00\\u53D1\\u8005\\u9700\\u8981\\u8FD9\\u4E2A\\u670D\\u52A1\\u5C31\\u4E0A\\u624B\\u505A\\uFF0C\\u7ED3\\u679C\\u5F88\\u591A\\u4E1C\\u897F\\u5E76\\u6CA1\\u6709\\u770B\\u4E0A\\u53BB\\u90A3\\u4E48\\u65B9\\u4FBF\\u3002\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"fa524fed-fde8-51f6-85ee-2afb7fcab057","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/model-and-view-logic-under-state-driven-mode/model-and-view-logic-under-state-driven-mode.md","id":"024f3d04-8fe3-5f84-9d1c-7bcc6d66120f","parent":{"name":"model-and-view-logic-under-state-driven-mode","sourceInstanceName":"blog"},"excerpt":"之前说过数据层相关的内容： 📦 实现一个简单朴素的 react 数据管理层 NOVUS 📊 React 实践技巧和性能优化 ⚓ React Hooks 理解 🤔 技术背后隐含的思维方式 这些文章涉及了很多数据层、性能、副作用相关的内容。今天我想换个角度，从无关框架和语言的角度，深入探讨数据驱动模式开发的核心逻辑——不是讨论某个具体的库，而是思考状态应该如何设计、数据如何流转、视图如何响应。 一、前言 如果经常做大前端业务，尤其是数据驱动模式 + 声明描述式的 UI 开发比如 React…","fields":{"title":"🔂 数据驱动模式下状态和视图层逻辑","slug":"/blog/model-and-view-logic-under-state-driven-mode","description":"“你需要精心设计好数据模型和组件状态才能得到一个运转良好的视图表现。” 无论是什么框架或者语言，这种架构优秀的应用都是减少状态变更牵扯的计算和渲染。","date":"2020-12-18","redirects":null,"datetime":"2020-12-18 01:17:36","categories":["code"],"series":null,"tags":["前端","整理"],"status":"online"},"frontmatter":{"published":null,"tags":["前端","整理"],"theme":null,"slug":"model-and-view-logic-under-state-driven-mode","date":"2020-12-18 01:17:36"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"model-and-view-logic-under-state-driven-mode\",\n  \"title\": \"🔂 数据驱动模式下状态和视图层逻辑\",\n  \"date\": \"2020-12-18 01:17:36\",\n  \"author\": \"Ubug\",\n  \"description\": \"“你需要精心设计好数据模型和组件状态才能得到一个运转良好的视图表现。” 无论是什么框架或者语言，这种架构优秀的应用都是减少状态变更牵扯的计算和渲染。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"前端\", \"整理\"],\n  \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u4E4B\\u524D\\u8BF4\\u8FC7\\u6570\\u636E\\u5C42\\u76F8\\u5173\\u7684\\u5185\\u5BB9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/blog/novus\"\n  }, \"\\uD83D\\uDCE6 \\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42 NOVUS\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/blog/react-pratice-and-performance\"\n  }, \"\\uD83D\\uDCCA React \\u5B9E\\u8DF5\\u6280\\u5DE7\\u548C\\u6027\\u80FD\\u4F18\\u5316\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/blog/react-hooks-vs-class\"\n  }, \"\\u2693 React Hooks \\u7406\\u89E3\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/blog/thinking-behind-tech\"\n  }, \"\\uD83E\\uDD14 \\u6280\\u672F\\u80CC\\u540E\\u9690\\u542B\\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\"))), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u6587\\u7AE0\\u6D89\\u53CA\\u4E86\\u5F88\\u591A\\u6570\\u636E\\u5C42\\u3001\\u6027\\u80FD\\u3001\\u526F\\u4F5C\\u7528\\u76F8\\u5173\\u7684\\u5185\\u5BB9\\u3002\\u4ECA\\u5929\\u6211\\u60F3\\u6362\\u4E2A\\u89D2\\u5EA6\\uFF0C\\u4ECE\\u65E0\\u5173\\u6846\\u67B6\\u548C\\u8BED\\u8A00\\u7684\\u89D2\\u5EA6\\uFF0C\\u6DF1\\u5165\\u63A2\\u8BA8\\u6570\\u636E\\u9A71\\u52A8\\u6A21\\u5F0F\\u5F00\\u53D1\\u7684\\u6838\\u5FC3\\u903B\\u8F91\\u2014\\u2014\\u4E0D\\u662F\\u8BA8\\u8BBA\\u67D0\\u4E2A\\u5177\\u4F53\\u7684\\u5E93\\uFF0C\\u800C\\u662F\\u601D\\u8003\\u72B6\\u6001\\u5E94\\u8BE5\\u5982\\u4F55\\u8BBE\\u8BA1\\u3001\\u6570\\u636E\\u5982\\u4F55\\u6D41\\u8F6C\\u3001\\u89C6\\u56FE\\u5982\\u4F55\\u54CD\\u5E94\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001\\u524D\\u8A00\"), mdx(\"p\", null, \"\\u5982\\u679C\\u7ECF\\u5E38\\u505A\\u5927\\u524D\\u7AEF\\u4E1A\\u52A1\\uFF0C\\u5C24\\u5176\\u662F\\u6570\\u636E\\u9A71\\u52A8\\u6A21\\u5F0F + \\u58F0\\u660E\\u63CF\\u8FF0\\u5F0F\\u7684 UI \\u5F00\\u53D1\\u6BD4\\u5982 React\\u3001Vue\\u3001Flutter\\u3001SwiftUI\\xA0\\uFF0C\\u5F88\\u660E\\u663E\\u7684\\u4F1A\\u611F\\u89C9\\u5230\\u6570\\u636E\\u9A71\\u52A8\\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\uFF0C\\u89C6\\u56FE\\u5C42\\u548C\\u6570\\u636E\\u5C42\\u5206\\u79BB\\u89E3\\u8026\\u7684\\u5F00\\u53D1\\u601D\\u8DEF\\uFF0C\\u7528\\u72B6\\u6001\\u6765\\u63A7\\u5236\\u89C6\\u56FE\\u7684\\u5C55\\u793A\\u3002\"), mdx(\"p\", null, \"\\u6570\\u636E\\u9A71\\u52A8\\u5F00\\u53D1\\u7684\\u6A21\\u5F0F\\uFF0C\\u51C6\\u786E\\u70B9\\u8BF4\\u662F\\u89C6\\u56FE\\u662F\\u6E32\\u67D3\\u51FD\\u6570\\u6839\\u636E\\u6570\\u636E\\u7684\\u8F93\\u5165\\u8BA1\\u7B97\\u8F93\\u51FA \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"View = render(Data)\"), \"\\uFF0C\\u6570\\u636E\\u72B6\\u6001\\u7684\\u53D8\\u66F4\\u54CD\\u5E94\\u5230\\u89C6\\u56FE\\uFF0C\\u89C6\\u56FE\\u7684\\u4E8B\\u4EF6\\u5F71\\u54CD\\u6570\\u636E\\u72B6\\u6001\\u53D8\\u52A8\\u3002\\u66F4\\u5E7F\\u4E49\\u4E0A\\u6765\\u8BB2\\uFF0C\\u72B6\\u6001\\u53D8\\u66F4\\u80FD\\u591F\\u88AB\\u8BA2\\u9605(\\u89C2\\u6D4B\\u3001\\u54CD\\u5E94\\u3001\\u4EE3\\u7406\\u3001\\u8FDE\\u8C03\\u4E4B\\u7C7B\\u7684\\u903B\\u8F91)\\uFF0C\\u5176\\u5B9E\\u5C31\\u7B97\\u662F\\u4E00\\u79CD\\u6570\\u636E\\u9A71\\u52A8\\u5F00\\u53D1\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u79CD\\u5F00\\u53D1\\u6A21\\u5F0F\\u7684\\u597D\\u5904\\u662F\\u5728\\u4E8E\\u4E1A\\u52A1\\u91CD\\u70B9\\u4F1A\\u653E\\u5728\\u8FD9\\u4E9B\\u6570\\u636E\\u7684\\u7EF4\\u62A4\\u4E0A\\uFF0C\\u6570\\u636E\\u662F\\u6838\\u5FC3\\uFF0C\\u4E5F\\u672C\\u5E94\\u8BE5\\u5C31\\u662F\\u6838\\u5FC3\\uFF0C\\u5468\\u8FB9\\u662F\\u4FEE\\u6539\\u548C\\u7EF4\\u62A4\\u7684\\u65B9\\u6CD5\\u3002\\u5269\\u4E0B\\u7684\\u624D\\u662F\\u4E0A\\u5C42\\u7684\\u89C6\\u56FE\\u548C\\u4EA4\\u4E92\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u5E94\\u7528\"), mdx(\"p\", null, \"\\u6570\\u636E\\u9A71\\u52A8\\u6A21\\u5F0F\\uFF1A\\u89C6\\u56FE\\u5C42\\u662F\\u7531\\u6570\\u636E\\u9A71\\u52A8\\u7684\\u6570\\u636E\\u5C42\\uFF1A\\u6570\\u636E\\u7684\\u5B58\\u50A8\\u3001\\u4FEE\\u6539\\u3001\\u901A\\u77E5\\u3001\\u8BA2\\u9605\\u7B49\"), mdx(\"p\", null, \"\\u4ECE\\u6574\\u4E2A\\u5E94\\u7528\\u7684\\u89D2\\u5EA6\\uFF0C\\u72B6\\u6001\\u5C42/\\u6570\\u636E\\u5C42\\u7684\\u62BD\\u8C61\\u8BBE\\u8BA1\\u662F\\u4E00\\u4E2A\\u5F88\\u6838\\u5FC3\\u7684\\u4E1C\\u897F\\u3002\"), mdx(\"p\", null, \"JQuery \\u65F6\\u4EE3\\uFF0C\\u5927\\u90E8\\u5206\\u7684\\u754C\\u9762\\u90FD\\u662F\\u5728\\u5904\\u7406\\u4EC0\\u4E48\\u64CD\\u4F5C\\u4FEE\\u6539\\u89C6\\u56FE\\u7684\\u54EA\\u4E2A\\u90E8\\u5206\\uFF0C\\u5F88\\u591A\\u65F6\\u5019\\u90FD\\u5728\\u505A\\u53CC\\u5411\\u540C\\u6B65\\u7684\\u80F6\\u6C34\\u4EE3\\u7801\\uFF0C\\u6BD4\\u5982\\u5728\\u89C6\\u56FE\\u4E0A\\u7ED1\\u5B9A\\u76D1\\u542C\\u51FD\\u6570\\uFF0C\\u7528\\u6237\\u64CD\\u4F5C\\u89E6\\u53D1\\u51FD\\u6570\\uFF0C\\u51FD\\u6570\\u6839\\u636E\\u64CD\\u4F5C\\u66F4\\u65B0\\u89C6\\u56FE\\u3002\\u5176\\u4E2D\\u5BF9\\u89C6\\u56FE\\u7684\\u4F9D\\u8D56\\u5F88\\u91CD\\uFF0C\\u53EF\\u4EE5\\u8BF4\\u903B\\u8F91\\u51E0\\u4E4E\\u90FD\\u662F\\u4F9D\\u9644\\u5728\\u89C6\\u56FE\\u5C42\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001Vue\\u3001React \\u5728\\u89C6\\u56FE\\u548C\\u6570\\u636E\\u5C42\\u4E0A\\u7684\\u8BBE\\u8BA1\"), mdx(\"p\", null, \"vue \\u56E0\\u4E3A\\u6A21\\u677F\\u4F18\\u5148\\uFF0C\\u6240\\u4EE5\\u8BA1\\u7B97\\u90E8\\u5206\\u504F\\u7231\\u653E\\u5230\\u751F\\u547D\\u5468\\u671F\\u3001computed\\u3001watch \\u8FD9\\u4E9B\\u5730\\u65B9\\uFF0C\\u89C6\\u56FE\\u7684\\u6A21\\u677F\\u91CC\\u9762\\u653E\\u7684\\u662F\\u8F7B\\u91CF\\u7684\\u5224\\u65AD\\u5FAA\\u73AF\\u7B49\\u3002\\u4ECE\\u8FD9\\u4E2A\\u89D2\\u5EA6\\u6765\\u8BF4\\u89C6\\u56FE\\u548C\\u6570\\u636E\\u6A21\\u578B\\u7684\\u5BF9\\u5E94\\u66F4\\u52A0\\u7EAF\\u7CB9\\uFF0Crender \\u8FD9\\u4E2A\\u6982\\u5FF5\\u88AB\\u63A5\\u7BA1\\u6DE1\\u5316\\uFF0C\\u5F00\\u53D1\\u8005\\u7EF4\\u62A4\\u6570\\u636E\\u6A21\\u578B\\u548C\\u89C6\\u56FE\\u6A21\\u677F\\uFF0C\\u72B6\\u6001\\u7684\\u53D8\\u66F4\\u548C\\u54CD\\u5E94 vue \\u6765\\u505A\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"ps:\\xA0vue \\u7684\\u6A21\\u677F\\u8BF4\\u5230\\u5E95\\u5176\\u5B9E\\u4E5F\\u662F\\u8BA1\\u7B97\\u7684\\u672C\\u8D28\\uFF0C\\u4E0D\\u8FC7\\u8FD9\\u4E2A\\u8BA1\\u7B97\\u7528\\u6A21\\u677F\\u8BED\\u6CD5\\u9650\\u5236\\u4E86\\u7075\\u6D3B\\u6027\\u3002\\u6BD4\\u5982\\u4E3A\\u4E86\\u63A7\\u5236\\u4E00\\u4E2A\\u5143\\u7D20\\u7684\\u663E\\u793A\\u9690\\u85CF\\u4E5F\\u8981\\u8BBE\\u7F6E\\u4E00\\u4E2A\\u72B6\\u6001\\u6765\\u63A7\\u5236\\u624D\\u4E0D\\u4F1A\\u5F04\\u810F\\u6A21\\u677F\\uFF0C\\u800C react \\u76F4\\u63A5\\u628A\\u5224\\u65AD\\u7684\\u8BA1\\u7B97\\u653E\\u5230 render \\u91CC\\u9762\\u4E5F\\u4E0D\\u4F1A\\u592A\\u5F71\\u54CD\\u53EF\\u8BFB\\u6027\\u3002\")), mdx(\"p\", null, \"\\u800C\\xA0react \\u662F\\u8BA1\\u7B97\\u4F18\\u5148\\uFF0Crender\\xA0\\u51FD\\u6570\\u5C31\\u662F\\u4E2A\\u8BA1\\u7B97\\u8FC7\\u7A0B\\uFF0C\\u5373\\u4F7F\\u7528 JSX\\xA0\\u8FD9\\u7C7B\\u8BED\\u6CD5\\u7CD6\\u4E5F\\u6539\\u53D8\\u4E0D\\u4E86\\u8BA1\\u7B97\\u7684\\u672C\\u8D28\\uFF0C\\u4ECE\\u8FD9\\u4E2A\\u89D2\\u5EA6\\u6765\\u8BF4\\u6574\\u4E2A\\u7EC4\\u4EF6\\u90FD\\u662F\\u5728\\u4E3A\\u8BA1\\u7B97\\u670D\\u52A1\\uFF0C\\u4EC0\\u4E48\\u65F6\\u5019\\u8BA1\\u7B97\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u548C\\u8BA1\\u7B97\\u7528\\u5230\\u7684\\u72B6\\u6001\\u3002render \\u76F4\\u63A5\\u4EA4\\u7ED9\\u5F00\\u53D1\\u8005\\u6765\\u505A\\u80FD\\u591F\\u6709\\u8DB3\\u591F\\u7684\\u7075\\u6D3B\\u6027\\uFF0C\\u8FD9\\u4E5F\\u662F\\u5F88\\u591A\\u4EBA\\u559C\\u6B22\\u7684\\u5730\\u65B9\\uFF0C\\u4F60\\u53EF\\u4EE5\\u7528\\u4F18\\u79C0\\u7684\\u6570\\u636E\\u6A21\\u578B\\u6765\\u642D\\u5EFA\\u89C6\\u56FE\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u7528\\u903B\\u8F91\\u6765\\u5F25\\u8865\\u6570\\u636E\\u6A21\\u578B\\u7684\\u7834\\u843D\\u3002\"), mdx(\"p\", null, \"\\u6B64\\u5916\\u56E0\\u4E3A render \\u7684\\u8BA1\\u7B97\\u5982\\u679C\\u592A\\u91CD\\u4F1A\\u5F71\\u54CD\\u5230\\u6027\\u80FD\\u7684\\u8868\\u73B0\\u548C\\u4E8B\\u4EF6\\u7684\\u54CD\\u5E94\\uFF0C\\u6240\\u4EE5\\u5F88\\u591A\\u7BC7\\u7AE0\\u548C\\u601D\\u8003\\u90FD\\u653E\\u5728\\u51CF\\u5C11\\xA0render \\u7684\\u8C03\\u7528\\u548C\\u91CC\\u9762\\u7684\\u8BA1\\u7B97\\u3002\\u800C render \\u88AB props \\u548C state \\u63A7\\u5236\\uFF0C\\u6240\\u4EE5\\u72B6\\u6001\\u7684\\u8BBE\\u8BA1\\u4E5F\\u662F\\u5F88\\u91CD\\u8981\\u7684\\u5730\\u65B9\\u3002\\u8FD9\\u4E2A\\u548C vue \\u7684\\u5FC3\\u667A\\u5012\\u4E5F\\u662F\\u6B8A\\u9014\\u540C\\u5F52\\u3002\"), mdx(\"p\", null, \"\\u4ECE\\u4E0A\\u9762\\u7684\\u53D9\\u8FF0\\u4E2D\\uFF0C\\u5F88\\u660E\\u663E\\u80FD\\u591F\\u611F\\u89C9\\u51FA\\u4E00\\u4E2A\\u903B\\u8F91:\\xA0\\u201C\\u4F60\\u9700\\u8981\\u7CBE\\u5FC3\\u8BBE\\u8BA1\\u597D\\u6570\\u636E\\u6A21\\u578B\\u548C\\u7EC4\\u4EF6\\u72B6\\u6001\\u624D\\u80FD\\u5F97\\u5230\\u4E00\\u4E2A\\u8FD0\\u8F6C\\u826F\\u597D\\u7684\\u89C6\\u56FE\\u8868\\u73B0\\u3002\\u201D \\u65E0\\u8BBA\\u662F\\u4EC0\\u4E48\\u6846\\u67B6\\u6216\\u8005\\u8BED\\u8A00\\uFF0C\\u8FD9\\u79CD\\u67B6\\u6784\\u4F18\\u79C0\\u7684\\u5E94\\u7528\\u90FD\\u662F\\u51CF\\u5C11\\u72B6\\u6001\\u53D8\\u66F4\\u7275\\u626F\\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\u3002\\u72B6\\u6001\\u4E0E\\u8BD5\\u56FE\\u89C6\\u56FE\\u5C42\\u7684\\u66F4\\u65B0\\u673A\\u5236\\u3001\\u6D4F\\u89C8\\u5668\\u8FDB\\u7A0B\\u7BA1\\u7406\\u7B49\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u6570\\u636E\\u5C42\\u7684\\u8BBE\\u8BA1\"), mdx(\"h3\", null, \"Single Source Of Truth\"), mdx(\"p\", null, \"\\u6570\\u636E\\u9A71\\u52A8\\u7684\\u6838\\u5FC3\\u5C31\\u4E00\\u53E5\\u8BDD\\uFF1A\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Single Source Of Truth\"), \"\\u3002\\u5E94\\u7528\\u7684\\u72B6\\u6001\\u53EA\\u6709\\u4E00\\u4E2A\\u6743\\u5A01\\u6765\\u6E90\\uFF0C\\u89C6\\u56FE\\u662F\\u5B83\\u7684\\u6295\\u5F71\\uFF0C\\u4E8B\\u4EF6\\u662F\\u5B83\\u7684\\u8F93\\u5165\\u3002\"), mdx(\"p\", null, \"\\u542C\\u8D77\\u6765\\u5F88\\u7B80\\u5355\\uFF0C\\u4F46\\u5B9E\\u9645\\u505A\\u8D77\\u6765\\u72B6\\u6001\\u5F88\\u5BB9\\u6613\\u5C31\\u6563\\u4E86\\u3002\\u7EC4\\u4EF6\\u81EA\\u8EAB\\u7684 state\\u3001context \\u91CC\\u4F20\\u7684\\u503C\\u3001URL \\u4E0A\\u7684\\u53C2\\u6570\\u3001localStorage \\u91CC\\u7F13\\u5B58\\u7684\\u6570\\u636E\\u3001\\u751A\\u81F3 DOM \\u672C\\u8EAB\\u66B4\\u9732\\u51FA\\u6765\\u7684\\u6EDA\\u52A8\\u4F4D\\u7F6E\\u2014\\u2014\\u8FD9\\u4E9B\\u90FD\\u662F\\u72B6\\u6001\\uFF0C\\u5982\\u679C\\u4E0D\\u523B\\u610F\\u53BB\\u6536\\u62E2\\uFF0C\\u5B83\\u4EEC\\u5C31\\u4F1A\\u5404\\u81EA\\u4E3A\\u653F\\uFF0C\\u53D8\\u6210\\u4E00\\u5806\\u96BE\\u4EE5\\u8FFD\\u8E2A\\u7684\\u9690\\u5F0F\\u4F9D\\u8D56\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5728\\u8BBE\\u8BA1\\u6570\\u636E\\u5C42\\u7684\\u65F6\\u5019\\uFF0C\\u9996\\u5148\\u8981\\u56DE\\u7B54\\u4E00\\u4E2A\\u95EE\\u9898\\uFF1A\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u54EA\\u4E9B\\u72B6\\u6001\\u662F\\u6E90\\u6570\\u636E\\uFF0C\\u54EA\\u4E9B\\u662F\\u6D3E\\u751F\\u6570\\u636E\\uFF1F\")), mdx(\"p\", null, \"\\u6E90\\u6570\\u636E\\uFF08source data\\uFF09\\u662F\\u4E1A\\u52A1\\u4E0A\\u72EC\\u7ACB\\u5B58\\u5728\\u7684\\uFF0C\\u6BD4\\u5982\\u7528\\u6237\\u4FE1\\u606F\\u3001\\u5217\\u8868\\u6570\\u636E\\u3001\\u5F53\\u524D\\u7684\\u7B5B\\u9009\\u6761\\u4EF6\\u3002\\u6D3E\\u751F\\u6570\\u636E\\uFF08deriveddata\\uFF09\\u662F\\u4ECE\\u6E90\\u6570\\u636E\\u8BA1\\u7B97\\u51FA\\u6765\\u7684\\uFF0C\\u6BD4\\u5982\\u8FC7\\u6EE4\\u540E\\u7684\\u5217\\u8868\\u3001\\u683C\\u5F0F\\u5316\\u540E\\u7684\\u91D1\\u989D\\u3001\\u67D0\\u4E2A\\u6761\\u4EF6\\u662F\\u5426\\u6EE1\\u8DB3\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E24\\u8005\\u7684\\u533A\\u5206\\u5F88\\u91CD\\u8981\\u3002\\u6D3E\\u751F\\u6570\\u636E\\u4E0D\\u5E94\\u8BE5\\u88AB\\u5355\\u72EC\\u5B58\\u50A8\\uFF0C\\u5B83\\u5E94\\u8BE5\\u59CB\\u7EC8\\u7531\\u6E90\\u6570\\u636E\\u5B9E\\u65F6\\u8BA1\\u7B97\\u5F97\\u51FA\\u3002\\u5982\\u679C\\u4F60\\u628A\\u6D3E\\u751F\\u6570\\u636E\\u4E5F\\u5B58\\u4E00\\u4EFD\\uFF0C\\u5C31\\u7B49\\u4E8E\\u7EF4\\u62A4\\u4E86\\u4E24\\u4E2A source of truth\\uFF0C\\u5B83\\u4EEC\\u4E4B\\u95F4\\u7684\\u540C\\u6B65\\u5C31\\u662F\\u4E00\\u4E2A\\u65E0\\u5E95\\u6D1E\\u2014\\u2014\\u8FD9\\u548C jQuery \\u65F6\\u4EE3\\u53CC\\u5411\\u540C\\u6B65\\u7684\\u80F6\\u6C34\\u4EE3\\u7801\\u672C\\u8D28\\u4E0A\\u662F\\u4E00\\u56DE\\u4E8B\\uFF0C\\u53EA\\u662F\\u6362\\u4E86\\u4E2A\\u5F62\\u5F0F\\u3002\"), mdx(\"h3\", null, \"\\u72B6\\u6001\\u7684\\u9897\\u7C92\\u5EA6\"), mdx(\"p\", null, \"\\u9897\\u7C92\\u5EA6\\u600E\\u4E48\\u5207\\u662F\\u4E00\\u4E2A\\u5F88\\u5B9E\\u9645\\u7684\\u95EE\\u9898\\u3002\\u592A\\u7C97\\u4E86\\uFF0C\\u4E00\\u4E2A\\u72B6\\u6001\\u5BF9\\u8C61\\u91CC\\u585E\\u4E86\\u51E0\\u5341\\u4E2A\\u5B57\\u6BB5\\uFF0C\\u4EFB\\u4F55\\u4E00\\u4E2A\\u5B57\\u6BB5\\u53D8\\u4E86\\u6574\\u68F5\\u7EC4\\u4EF6\\u6811\\u90FD\\u8981\\u91CD\\u65B0\\u8D70\\u4E00\\u904D diff\\uFF1B\\u592A\\u7EC6\\u4E86\\uFF0C\\u72B6\\u6001\\u6570\\u91CF\\u7206\\u70B8\\uFF0C\\u8BA2\\u9605\\u5173\\u7CFB\\u53D8\\u5F97\\u590D\\u6742\\uFF0C\\u8C03\\u8BD5\\u7684\\u65F6\\u5019\\u8981\\u5728\\u5341\\u51E0\\u4E2A\\u5730\\u65B9\\u8DF3\\u6765\\u8DF3\\u53BB\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u8F83\\u52A1\\u5B9E\\u7684\\u505A\\u6CD5\\u662F\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6309\\u4E1A\\u52A1\\u57DF\\u6765\\u5212\\u5206\"), \"\\u3002\\u4E00\\u4E2A\\u8868\\u5355\\u7684\\u72B6\\u6001\\u3001\\u4E00\\u4E2A\\u5217\\u8868\\u7684\\u72B6\\u6001\\u3001\\u4E00\\u4E2A\\u7528\\u6237\\u4F1A\\u8BDD\\u7684\\u72B6\\u6001\\u2014\\u2014\\u5404\\u81EA\\u662F\\u72EC\\u7ACB\\u7684model\\uFF0C\\u5404\\u81EA\\u7BA1\\u7406\\u81EA\\u5DF1\\u7684\\u6E90\\u6570\\u636E\\u548C\\u4FEE\\u6539\\u65B9\\u6CD5\\u3002\\u4E0D\\u540C model \\u4E4B\\u95F4\\u901A\\u8FC7\\u4E8B\\u4EF6\\u6216\\u5F15\\u7528\\u6765\\u901A\\u4FE1\\uFF0C\\u800C\\u4E0D\\u662F\\u4E92\\u76F8\\u76F4\\u63A5\\u64CD\\u4F5C\\u5BF9\\u65B9\\u7684\\u72B6\\u6001\\u3002\"), mdx(\"p\", null, \"\\u5728 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/novus\"\n  }, \"NOVUS\"), \" \\u7684\\u8BBE\\u8BA1\\u91CC\\u6211\\u5C31\\u662F\\u6309\\u8FD9\\u4E2A\\u601D\\u8DEF\\u6765\\u7684\\uFF0C\\u4E00\\u4E2A Model \\u5C31\\u662F\\u4E00\\u4E2A\\u4E1A\\u52A1\\u57DF\\u7684 state + actions\\uFF0C\\u8BA2\\u9605\\u8005\\u53EA\\u5173\\u5FC3\\u81EA\\u5DF1\\u4F9D\\u8D56\\u7684 Model \\u53D8\\u4E86\\u6CA1\\u6709\\uFF0C\\u4E0D\\u4F1A\\u56E0\\u4E3A\\u4E0D\\u76F8\\u5173\\u7684\\u72B6\\u6001\\u53D8\\u66F4\\u88AB\\u7275\\u626F\\u8FDB\\u53BB\\u3002\"), mdx(\"h3\", null, \"\\u4E0D\\u53EF\\u53D8\\u4E0E\\u7ED3\\u6784\\u5171\\u4EAB\"), mdx(\"p\", null, \"\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u5728\\u6570\\u636E\\u9A71\\u52A8\\u5F00\\u53D1\\u91CC\\u51E0\\u4E4E\\u662F\\u4E00\\u4E2A\\u6807\\u914D\\u3002React \\u81EA\\u4E0D\\u5FC5\\u8BF4\\uFF0CVue 3 \\u7684 reactive \\u867D\\u7136\\u5E95\\u5C42\\u662F Proxy \\u505A\\u7684\\u54CD\\u5E94\\u5F0F\\uFF0C\\u4F46\\u5982\\u679C\\u4F60\\u770B\\u8FC7\\u5B83\\u7684\\u6E90\\u7801\\uFF0C\\u5BF9\\u6570\\u7EC4\\u548C\\u5BF9\\u8C61\\u7684\\u53D8\\u66F4\\u68C0\\u6D4B\\u5176\\u5B9E\\u4E5F\\u662F\\u5728\\u6A21\\u62DF\\u4E0D\\u53EF\\u53D8\\u7684\\u8BED\\u4E49\\u2014\\u2014\\u53EA\\u4E0D\\u8FC7\\u6846\\u67B6\\u66FF\\u4F60\\u505A\\u4E86\\u8FD9\\u4EF6\\u4E8B\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u53EF\\u53D8\\u7684\\u6838\\u5FC3\\u4EF7\\u503C\\u4E0D\\u5728\\u4E8E\\\"\\u9632\\u6B62\\u610F\\u5916\\u4FEE\\u6539\\\"\\u8FD9\\u79CD\\u5B89\\u5168\\u5C42\\u9762\\u7684\\u8003\\u91CF\\uFF08\\u867D\\u7136\\u4E5F\\u6709\\uFF09\\uFF0C\\u800C\\u662F\\u5728\\u4E8E\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6BD4\\u8F83\\u6210\\u672C\"), \"\\u3002\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"a === b\"), \"\\u5728\\u5F15\\u7528\\u7EA7\\u522B\\u662F O(1) \\u7684\\uFF0C\\u5982\\u679C\\u6570\\u636E\\u662F\\u4E0D\\u53EF\\u53D8\\u7684\\uFF0C\\u90A3\\u5F15\\u7528\\u6CA1\\u53D8\\u5C31\\u610F\\u5473\\u7740\\u6570\\u636E\\u6CA1\\u53D8\\uFF0C\\u6574\\u4E2A diff \\u8FC7\\u7A0B\\u53EF\\u4EE5\\u5FEB\\u901F\\u8DF3\\u8FC7\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u5B8C\\u5168\\u4E0D\\u53EF\\u53D8\\u610F\\u5473\\u7740\\u6BCF\\u6B21\\u4FEE\\u6539\\u90FD\\u8981\\u590D\\u5236\\uFF0C\\u5927\\u5BF9\\u8C61\\u590D\\u5236\\u8D77\\u6765\\u4EE3\\u4EF7\\u5F88\\u9AD8\\u3002\\u6240\\u4EE5\\u5B9E\\u9645\\u7528\\u7684\\u662F\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u7ED3\\u6784\\u5171\\u4EAB\"), \"\\uFF08structural sharing\\uFF09\\u2014\\u2014Immutable.js \\u7684 Record\\u3001immer \\u7684 Proxy \\u81EA\\u52A8\\u751F\\u6210 draft\\u3001\\u751A\\u81F3 React 18 \\u91CC\\u7684\\u4E00\\u4E9B\\u5185\\u90E8\\u4F18\\u5316\\uFF0C\\u672C\\u8D28\\u4E0A\\u90FD\\u662F\\u8FD9\\u4E2A\\u601D\\u8DEF\\uFF1A\\u4FEE\\u6539\\u65F6\\u53EA\\u590D\\u5236\\u53D8\\u66F4\\u8DEF\\u5F84\\u4E0A\\u7684\\u8282\\u70B9\\uFF0C\\u5176\\u4ED6\\u5206\\u652F\\u5171\\u4EAB\\u5F15\\u7528\\u3002\"), mdx(\"h3\", null, \"\\u72B6\\u6001\\u7684\\u526F\\u4F5C\\u7528\\u8FB9\\u754C\"), mdx(\"p\", null, \"\\u6570\\u636E\\u5C42\\u8FD8\\u8981\\u5904\\u7406\\u4E00\\u4E2A\\u95EE\\u9898\\uFF1A\\u526F\\u4F5C\\u7528\\u653E\\u5728\\u54EA\\u91CC\\u3002\"), mdx(\"p\", null, \"\\u7F51\\u7EDC\\u8BF7\\u6C42\\u3001\\u5B9A\\u65F6\\u5668\\u3001DOM \\u64CD\\u4F5C\\u2014\\u2014\\u8FD9\\u4E9B\\u4E0D\\u5C5E\\u4E8E\\u7EAF\\u6570\\u636E\\u53D8\\u66F4\\uFF0C\\u5B83\\u4EEC\\u662F\\u526F\\u4F5C\\u7528\\u3002\\u5728 Flux \\u4F53\\u7CFB\\u91CC\\u526F\\u4F5C\\u7528\\u901A\\u5E38\\u653E\\u5728 action \\u5C42\\uFF08redux-thunk\\u3001redux-saga\\u3001dva \\u7684 effects\\uFF09\\uFF0C\\u5728 Vue \\u91CC\\u53EF\\u4EE5\\u653E\\u5728 watch \\u6216\\u8005 action \\u91CC\\u3002\"), mdx(\"p\", null, \"\\u5173\\u952E\\u539F\\u5219\\u662F\\uFF1A\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6570\\u636E\\u5C42\\u7684\\u6838\\u5FC3\\u8DEF\\u5F84\\u5E94\\u8BE5\\u662F\\u540C\\u6B65\\u7684\\u3001\\u53EF\\u9884\\u6D4B\\u7684\"), \"\\u3002\\u526F\\u4F5C\\u7528\\u53EF\\u4EE5\\u6709\\uFF0C\\u4F46\\u5B83\\u4EEC\\u4E0D\\u5E94\\u8BE5\\u963B\\u585E\\u72B6\\u6001\\u66F4\\u65B0\\u7684\\u6838\\u5FC3\\n\\u94FE\\u8DEF\\u3002\\u4E00\\u4E2A\\u72B6\\u6001\\u53D8\\u66F4\\u89E6\\u53D1\\u4E86\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u91CD\\u65B0\\u6E32\\u67D3\\u91CC\\u4E0D\\u5E94\\u8BE5\\u5305\\u542B\\u5F02\\u6B65\\u903B\\u8F91\\uFF1B\\u4E00\\u4E2A\\u5F02\\u6B65\\u64CD\\u4F5C\\u5B8C\\u6210\\u4E86\\uFF0C\\u5B83\\u66F4\\u65B0\\u72B6\\u6001\\uFF0C\\u7136\\u540E\\n\\u72B6\\u6001\\u53D8\\u66F4\\u518D\\u89E6\\u53D1\\u6E32\\u67D3\\u3002\\u8FD9\\u6761\\u94FE\\u8DEF\\u59CB\\u7EC8\\u662F\\u5355\\u5411\\u7684\\uFF0C\\u5F02\\u6B65\\u53EA\\u662F\\u89E6\\u53D1\\u72B6\\u6001\\u53D8\\u66F4\\u7684\\u624B\\u6BB5\\uFF0C\\u800C\\u4E0D\\u662F\\u72B6\\u6001\\u53D8\\u66F4\\u7684\\u4E00\\u90E8\\u5206\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u89C6\\u56FE\\u5C42\\u7684\\u8BBE\\u8BA1\"), mdx(\"h3\", null, \"\\u63CF\\u8FF0\\u6027\\u8BED\\u8A00\\u662F\\u6700\\u4F73\\u65B9\\u5F0F\"), mdx(\"p\", null, \"\\u5728 UI \\u5F00\\u53D1\\u9886\\u57DF\\uFF0C\\u58F0\\u660E\\u5F0F\\uFF08\\u63CF\\u8FF0\\u6027\\uFF09\\u7684\\u4EE3\\u7801\\u51E0\\u4E4E\\u603B\\u662F\\u4F18\\u4E8E\\u547D\\u4EE4\\u5F0F\\u7684\\u3002\\u539F\\u56E0\\u5F88\\u7B80\\u5355\\uFF1AUI \\u662F\\u4E00\\u4E2A\\\"\\u6839\\u636E\\u8F93\\u5165\\u6570\\u636E\\u8BA1\\u7B97\\u8F93\\u51FA\\u753B\\u9762\\\"\\u7684\\u8FC7\\u7A0B\\uFF0C\\u8FD9\\u5929\\u7136\\u5C31\\u662F\\u4E00\\u4E2A\\u7EAF\\u51FD\\u6570\\u7684\\u5F62\\u6001\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"View = render(Data)\"), \"\\u3002\"), mdx(\"p\", null, \"\\u547D\\u4EE4\\u5F0F\\u7684\\u4EE3\\u7801\\u662F\\u5728\\u63CF\\u8FF0\\\"\\u600E\\u4E48\\u505A\\\"\\uFF1A\\u5148\\u627E\\u5230\\u8FD9\\u4E2A DOM \\u8282\\u70B9\\uFF0C\\u7136\\u540E\\u8BBE\\u7F6E\\u5B83\\u7684\\u6587\\u672C\\u5185\\u5BB9\\uFF0C\\u7136\\u540E\\u7ED9\\u5B83\\u52A0\\u4E2A class\\uFF0C\\u7136\\u540E...\\u3002\\u4E00\\u65E6 UI \\u590D\\u6742\\u8D77\\u6765\\uFF0C\\u8FD9\\u4E9B\\u6B65\\u9AA4\\u4E4B\\u95F4\\u7684\\u987A\\u5E8F\\u4F9D\\u8D56\\u548C\\u72B6\\u6001\\u7EA0\\u7F20\\u4F1A\\u53D8\\u5F97\\u975E\\u5E38\\u75DB\\u82E6\\u3002\\u800C\\u4E14\\u547D\\u4EE4\\u5F0F\\u4EE3\\u7801\\u548C\\u6700\\u7EC8\\u7684\\u89C6\\u89C9\\u6548\\u679C\\u4E4B\\u95F4\\u9694\\u4E86\\u597D\\u51E0\\u5C42\\u4E2D\\u95F4\\u8FC7\\u7A0B\\uFF0C\\u4F60\\u5F88\\u96BE\\u4E00\\u773C\\u770B\\u51FA\\u8FD9\\u6BB5\\u4EE3\\u7801\\u4F1A\\u6E32\\u67D3\\u51FA\\u4EC0\\u4E48\\u6837\\u5B50\\u3002\"), mdx(\"p\", null, \"\\u58F0\\u660E\\u5F0F\\u7684\\u4EE3\\u7801\\u662F\\u5728\\u63CF\\u8FF0\\\"\\u662F\\u4EC0\\u4E48\\\"\\uFF1A\\u5F53 data \\u662F A \\u7684\\u65F6\\u5019\\u663E\\u793A X\\uFF0C\\u662F B \\u7684\\u65F6\\u5019\\u663E\\u793A Y\\u3002\\u6846\\u67B6\\u8D1F\\u8D23\\u628A\\\"\\u662F\\u4EC0\\u4E48\\\"\\u7FFB\\u8BD1\\u6210\\u5177\\u4F53\\u7684 DOM \\u64CD\\u4F5C\\u3002\\u5F00\\u53D1\\u8005\\u4E0D\\u9700\\u8981\\u5173\\u5FC3\\u4E2D\\u95F4\\u7684 diff \\u8FC7\\u7A0B\\u548C DOM \\u64CD\\u4F5C\\uFF0C\\u6CE8\\u610F\\u529B\\u53EF\\u4EE5\\u96C6\\u4E2D\\u5728\\u6570\\u636E\\u5230\\u89C6\\u56FE\\u7684\\u6620\\u5C04\\u5173\\u7CFB\\u4E0A\\u3002\"), mdx(\"p\", null, \"React \\u7684 JSX \\u548C Vue \\u7684 template \\u90FD\\u662F\\u58F0\\u660E\\u5F0F\\u7684\\uFF0C\\u53EA\\u662F\\u5F62\\u5F0F\\u4E0D\\u540C\\u3002JSX \\u662F\\u5728 JavaScript \\u91CC\\u5199 UI\\uFF0Ctemplate \\u662F\\u5728 UI \\u91CC\\u5D4C\\u5165\\u8F7B\\u91CF\\u7684\\u8868\\u8FBE\\u5F0F\\u3002\\u524D\\u8005\\u7075\\u6D3B\\u5EA6\\u66F4\\u9AD8\\uFF0C\\u540E\\u8005\\u5BF9\\u8BBE\\u8BA1\\u5E08\\u53CB\\u597D\\u5EA6\\u66F4\\u9AD8\\u3002\\u4F46\\u672C\\u8D28\\u4E0A\\u5B83\\u4EEC\\u90FD\\u5728\\u505A\\u540C\\u4E00\\u4EF6\\u4E8B\\uFF1A\\u63CF\\u8FF0\\u6570\\u636E\\u5230\\u89C6\\u56FE\\u7684\\u6620\\u5C04\\u3002\"), mdx(\"h3\", null, \"Reconciliation \\u2014 \\u600E\\u4E48\\u505A\\u5230\\u9AD8\\u6548\\u7684\"), mdx(\"p\", null, \"\\u58F0\\u660E\\u5F0F\\u6846\\u67B6\\u7684\\u57FA\\u77F3\\u662F Reconciliation\\uFF08\\u534F\\u8C03\\u7B97\\u6CD5\\uFF09\\u3002\\u6BCF\\u6B21\\u72B6\\u6001\\u53D8\\u66F4\\u540E\\uFF0C\\u6846\\u67B6\\u9700\\u8981\\u7B97\\u51FA\\\"\\u5F53\\u524D\\u89C6\\u56FE\\\"\\u548C\\\"\\u65B0\\u89C6\\u56FE\\\"\\u4E4B\\u95F4\\u7684\\u6700\\u5C0F\\u5DEE\\u5F02\\uFF0C\\u7136\\u540E\\u53EA\\u66F4\\u65B0\\u5DEE\\u5F02\\u90E8\\u5206\\u3002\\u8FD9\\u4E2A\\u8FC7\\u7A0B\\u5982\\u679C\\u505A\\u5F97\\u597D\\uFF0C\\u5C31\\u80FD\\u907F\\u514D\\u5927\\u91CF\\u7684\\u65E0\\u6548 DOM \\u64CD\\u4F5C\\u3002\"), mdx(\"p\", null, \"React \\u7684\\u505A\\u6CD5\\u662F\\u865A\\u62DF DOM + Fiber \\u67B6\\u6784\\u3002\\u751F\\u6210\\u65B0\\u7684\\u865A\\u62DF DOM \\u6811\\uFF0C\\u548C\\u65E7\\u7684\\u6811\\u505A diff\\uFF0C\\u627E\\u51FA\\u9700\\u8981\\u66F4\\u65B0\\u7684\\u8282\\u70B9\\uFF0C\\u7136\\u540E\\u6279\\u91CF\\u64CD\\u4F5C\\u771F\\u5B9E DOM\\u3002Fiber \\u628A diff \\u8FC7\\u7A0B\\u62C6\\u6210\\u5C0F\\u4EFB\\u52A1\\uFF0C\\u53EF\\u4EE5\\u6682\\u505C\\u548C\\u6062\\u590D\\uFF0C\\u914D\\u5408 Scheduler \\u5B9E\\u73B0\\u65F6\\u95F4\\u5207\\u7247\\u2014\\u2014\\u6BCF\\u5E27\\u7ED9 ms \\u7EA7\\u522B\\u7684\\u9884\\u7B97\\uFF0C\\u8D85\\u4E86\\u5C31\\u8BA9\\u51FA\\u4E3B\\u7EBF\\u7A0B\\u7ED9\\u6D4F\\u89C8\\u5668\\u505A\\u6E32\\u67D3\\u548C\\u54CD\\u5E94\\u4E8B\\u4EF6\\uFF0C\\u4E0B\\u4E00\\u5E27\\u7EE7\\u7EED\\u3002\"), mdx(\"p\", null, \"Vue \\u7684\\u505A\\u6CD5\\u7565\\u6709\\u4E0D\\u540C\\u3002Vue 2 \\u7528\\u7684\\u662F\\u865A\\u62DF DOM\\uFF0C\\u4F46\\u914D\\u5408\\u54CD\\u5E94\\u5F0F\\u7CFB\\u7EDF\\u505A\\u4E86\\u66F4\\u7EC6\\u7C92\\u5EA6\\u7684\\u4F9D\\u8D56\\u6536\\u96C6\\u2014\\u2014\\u5B83\\u77E5\\u9053\\u54EA\\u4E9B\\u7EC4\\u4EF6\\u4F9D\\u8D56\\u4E86\\u54EA\\u4E9B\\u6570\\u636E\\uFF0C\\u6570\\u636E\\u53D8\\u4E86\\u53EA\\u9700\\u8981\\u91CD\\u65B0\\u6E32\\u67D3\\u76F8\\u5173\\u7684\\u7EC4\\u4EF6\\uFF0C\\u4E0D\\u9700\\u8981\\u6574\\u68F5\\u6811\\u8D70\\u4E00\\u904D diff\\u3002Vue 3 \\u66F4\\u8FDB\\u4E00\\u6B65\\uFF0C\\u7F16\\u8BD1\\u9636\\u6BB5\\u5C31\\u80FD\\u9759\\u6001\\u5206\\u6790\\u51FA\\u54EA\\u4E9B\\u8282\\u70B9\\u662F\\u9759\\u6001\\u7684\\uFF08\\u4E0D\\u4F1A\\u53D8\\uFF09\\uFF0C\\u8FD0\\u884C\\u65F6\\u76F4\\u63A5\\u8DF3\\u8FC7\\uFF0C\\u8FD8\\u80FD\\u505A\\u57FA\\u4E8E Proxy \\u7684\\u7CBE\\u786E\\u66F4\\u65B0\\u3002\"), mdx(\"p\", null, \"\\u4E24\\u8005\\u8DEF\\u5F84\\u4E0D\\u540C\\uFF0C\\u76EE\\u6807\\u4E00\\u81F4\\uFF1A\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u51CF\\u5C11\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\\u548C DOM \\u64CD\\u4F5C\"), \"\\u3002React \\u4FA7\\u91CD\\u5728\\u8FD0\\u884C\\u65F6\\u7684\\u8C03\\u5EA6\\u4F18\\u5316\\uFF0CVue \\u4FA7\\u91CD\\u5728\\u7F16\\u8BD1\\u671F\\u548C\\u54CD\\u5E94\\u5F0F\\u7684\\u7CBE\\u786E\\u8FFD\\u8E2A\\u3002\"), mdx(\"h3\", null, \"functional update \\u548C data-binding\"), mdx(\"p\", null, \"\\u72B6\\u6001\\u5230\\u89C6\\u56FE\\u7684\\u66F4\\u65B0\\u65B9\\u5F0F\\uFF0C\\u5927\\u81F4\\u53EF\\u4EE5\\u5206\\u6210\\u4E24\\u6D3E\\uFF1A\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"functional update\"), \"\\uFF08\\u51FD\\u6570\\u5F0F\\u66F4\\u65B0\\uFF09\\uFF1AReact \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"setState\"), \" \\u662F\\u5178\\u578B\\u4EE3\\u8868\\u3002\\u4F60\\u544A\\u8BC9\\u6846\\u67B6\\\"\\u72B6\\u6001\\u5E94\\u8BE5\\u53D8\\u6210\\u4EC0\\u4E48\\\"\\uFF0C\\u6846\\u67B6\\u8D1F\\u8D23\\u89E6\\u53D1\\u91CD\\u65B0\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\u3002\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"setState(prev => prev + 1)\"), \" \\u8FD9\\u79CD\\u5199\\u6CD5\\u672C\\u8EAB\\u5C31\\u662F\\u4E00\\u4E2A\\u51FD\\u6570\\uFF0C\\u63CF\\u8FF0\\u7684\\u662F\\u72B6\\u6001\\u8F6C\\u6362\\uFF0C\\u800C\\u4E0D\\u662F\\u76F4\\u63A5\\u8D4B\\u503C\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"data-binding / reactivity\"), \"\\uFF08\\u6570\\u636E\\u7ED1\\u5B9A / \\u54CD\\u5E94\\u5F0F\\uFF09\\uFF1AVue \\u662F\\u5178\\u578B\\u4EE3\\u8868\\u3002\\u4F60\\u4FEE\\u6539\\u6570\\u636E\\uFF0C\\u6846\\u67B6\\u81EA\\u52A8\\u68C0\\u6D4B\\u5230\\u53D8\\u66F4\\u5E76\\u66F4\\u65B0\\u89C6\\u56FE\\u3002\\u5F00\\u53D1\\u8005\\u4E0D\\u9700\\u8981\\u663E\\u5F0F\\u5730\\\"\\u544A\\u8BC9\\\"\\u6846\\u67B6\\u53BB\\u66F4\\u65B0\\uFF0C\\u56E0\\u4E3A\\u6846\\u67B6\\u901A\\u8FC7 Proxy\\uFF08Vue 3\\uFF09\\u6216\\u8005\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Object.defineProperty\"), \"\\uFF08Vue 2\\uFF09\\u62E6\\u622A\\u4E86\\u6570\\u636E\\u7684\\u8BFB\\u5199\\uFF0C\\u5728\\u5199\\u64CD\\u4F5C\\u53D1\\u751F\\u65F6\\u81EA\\u52A8\\u89E6\\u53D1\\u89C6\\u56FE\\u66F4\\u65B0\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E24\\u8005\\u7684\\u533A\\u522B\\u5728\\u4E8E\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4F9D\\u8D56\\u5173\\u7CFB\\u7684\\u5EFA\\u7ACB\\u65B9\\u5F0F\\u4E0D\\u540C\"), \"\\u3002\"), mdx(\"p\", null, \"React \\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\u662F\\u9690\\u5F0F\\u7684\\u2014\\u2014render \\u51FD\\u6570\\u91CC\\u8BFB\\u4E86\\u54EA\\u4E9B state/props\\uFF0CReact \\u5E76\\u4E0D\\u77E5\\u9053\\uFF08\\u9664\\u975E\\u4F60\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useMemo\"), \" \\u7684deps \\u6570\\u7EC4\\u663E\\u5F0F\\u58F0\\u660E\\uFF09\\u3002\\u6240\\u4EE5 React \\u9700\\u8981\\u6BCF\\u6B21 state \\u53D8\\u4E86\\u5C31\\u91CD\\u65B0\\u6267\\u884C render\\uFF0C\\u7136\\u540E\\u5728 diff \\u9636\\u6BB5\\u5224\\u65AD\\u5B9E\\u9645\\u8F93\\u51FA\\u6709\\u6CA1\\u6709\\u53D8\\u5316\\u3002\"), mdx(\"p\", null, \"Vue \\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\u662F\\u663E\\u5F0F\\u7684\\u2014\\u2014\\u54CD\\u5E94\\u5F0F\\u7CFB\\u7EDF\\u5728 render \\u8FC7\\u7A0B\\u4E2D\\u4F1A\\u8FFD\\u8E2A\\u54EA\\u4E9B\\u54CD\\u5E94\\u5F0F\\u6570\\u636E\\u88AB\\u8BBF\\u95EE\\u4E86\\uFF0C\\u5EFA\\u7ACB\\u4E86\\u7CBE\\u786E\\u7684\\u4F9D\\u8D56\\u56FE\\u3002\\u6570\\u636E\\u53D8\\u4E86\\uFF0C\\u53EA\\u6709\\u4F9D\\u8D56\\u4E86\\u8FD9\\u4E2A\\u6570\\u636E\\u7684\\u7EC4\\u4EF6\\u4F1A\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u4E0D\\u9700\\u8981\\u6574\\u68F5\\u6811\\u8D70 diff\\u3002\"), mdx(\"p\", null, \"\\u4ECE\\u7406\\u8BBA\\u4E0A\\u8BF4\\uFF0CVue \\u7684\\u65B9\\u5F0F\\u5728\\u7CBE\\u7EC6\\u5EA6\\u4E0A\\u66F4\\u6709\\u4F18\\u52BF\\uFF0C\\u56E0\\u4E3A\\u4F9D\\u8D56\\u6536\\u96C6\\u662F\\u9759\\u6001\\u7684\\u3001\\u786E\\u5B9A\\u6027\\u7684\\u3002React \\u7684\\u65B9\\u5F0F\\u9700\\u8981\\u66F4\\u7C97\\u7C92\\u5EA6\\u7684\\u91CD\\u65B0\\u8BA1\\u7B97\\uFF0C\\u7136\\u540E\\u5728 diff \\u9636\\u6BB5\\u6765\\u8FC7\\u6EE4\\u6389\\u65E0\\u6548\\u66F4\\u65B0\\u3002\\u8FD9\\u4E5F\\u662F\\u4E3A\\u4EC0\\u4E48 React \\u793E\\u533A\\u91CC\\u6709\\u5927\\u91CF\\u7684\\u4F18\\u5316\\u6280\\u5DE7\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"React.memo\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useMemo\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useCallback\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"PureComponent\"), \"\\uFF09\\u2014\\u2014\\u672C\\u8D28\\u4E0A\\u90FD\\u662F\\u5728\\u624B\\u52A8\\u5F25\\u8865\\u4F9D\\u8D56\\u8FFD\\u8E2A\\u7684\\u7F3A\\u5931\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"ps: React Hooks \\u7684 deps \\u6570\\u7EC4\\u67D0\\u79CD\\u7A0B\\u5EA6\\u4E0A\\u5C31\\u662F\\u5728\\u624B\\u52A8\\u58F0\\u660E\\u4F9D\\u8D56\\uFF0C\\u548C Vue \\u7684\\u81EA\\u52A8\\u6536\\u96C6\\u4F9D\\u8D56\\u662F\\u540C\\u4E00\\u4E2A\\u95EE\\u9898\\u7684\\u4E24\\u79CD\\u89E3\\u6CD5\\u3002\\u53EA\\u4E0D\\u8FC7\\u4E00\\u4E2A\\u9760\\u5F00\\u53D1\\u8005\\u81EA\\u89C9\\uFF0C\\u4E00\\u4E2A\\u9760\\u6846\\u67B6\\u62E6\\u622A\\u3002\")), mdx(\"h2\", null, \"\\u516D\\u3001\\u9A71\\u52A8\\u548C\\u66F4\\u65B0\\u673A\\u5236\"), mdx(\"h3\", null, \"\\u89C6\\u56FE\\u5C42\\u66F4\\u65B0\\u7684\\u5B8C\\u6574\\u94FE\\u8DEF\"), mdx(\"p\", null, \"\\u628A\\u524D\\u9762\\u8BF4\\u7684\\u4E32\\u8D77\\u6765\\uFF0C\\u4E00\\u6B21\\u5B8C\\u6574\\u7684\\u72B6\\u6001\\u9A71\\u52A8\\u89C6\\u56FE\\u66F4\\u65B0\\u7684\\u94FE\\u8DEF\\u5927\\u6982\\u662F\\u8FD9\\u6837\\u7684\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"\\u7528\\u6237\\u64CD\\u4F5C \\u2192 \\u4E8B\\u4EF6\\u5904\\u7406 \\u2192 \\u4FEE\\u6539\\u72B6\\u6001 \\u2192 \\u6846\\u67B6\\u68C0\\u6D4B\\u5230\\u53D8\\u66F4 \\u2192 \\u91CD\\u65B0\\u8BA1\\u7B97\\u89C6\\u56FE \\u2192 diff \\u2192 \\u66F4\\u65B0 DOM\\n\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u9762\\u6709\\u51E0\\u4E2A\\u73AF\\u8282\\u662F\\u53EF\\u4EE5\\u88AB\\u4F18\\u5316\\u7684\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4FEE\\u6539\\u72B6\\u6001\\u5230\\u68C0\\u6D4B\\u53D8\\u66F4\"), \"\\uFF1AReact \\u9760\\u8C03\\u7528\\u6808\\uFF08setState \\u88AB\\u8C03\\u7528\\u5C31\\u7B97\\u53D8\\u66F4\\uFF09\\uFF0CVue \\u9760 Proxy \\u62E6\\u622A\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u91CD\\u65B0\\u8BA1\\u7B97\\u89C6\\u56FE\"), \"\\uFF1AReact \\u662F\\u91CD\\u8D70 render\\uFF08\\u6574\\u4E2A\\u7EC4\\u4EF6\\u6811\\u6216 memo \\u8FC7\\u6EE4\\u540E\\u7684\\u5B50\\u6811\\uFF09\\uFF0CVue \\u662F\\u53EA\\u8D70\\u4F9D\\u8D56\\u4E86\\u8FD9\\u4E2A\\u6570\\u636E\\u7684\\u7EC4\\u4EF6\\u3002\\u8FD9\\u4E2A\\u73AF\\u8282\\u662F\\u6027\\u80FD\\u5F00\\u9500\\u7684\\u5927\\u5934\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"diff\"), \"\\uFF1AReact \\u7684 Fiber diff \\u662F\\u53EF\\u4E2D\\u65AD\\u7684\\uFF0CVue 3 \\u7684\\u7F16\\u8BD1\\u671F\\u4F18\\u5316\\u53EF\\u4EE5\\u8DF3\\u8FC7\\u9759\\u6001\\u8282\\u70B9\\u3002\\u4E24\\u8005\\u7684 diff \\u7B56\\u7565\\u90FD\\u662F\\u540C\\u5C42\\u6BD4\\u8F83 + key \\u5339\\u914D\\uFF0C\\u590D\\u6742\\u5EA6 O(n)\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u66F4\\u65B0 DOM\"), \"\\uFF1A\\u6700\\u7EC8\\u843D\\u5B9E\\u5230 DOM \\u64CD\\u4F5C\\u3002React \\u4F1A\\u628A\\u591A\\u6B21 DOM \\u64CD\\u4F5C\\u6279\\u91CF\\u6267\\u884C\\uFF0CVue \\u4E5F\\u6709\\u7C7B\\u4F3C\\u7684\\u673A\\u5236\\u3002\\u8FD9\\u4E2A\\u73AF\\u8282\\u7684\\u4F18\\u5316\\u7A7A\\u95F4\\u76F8\\u5BF9\\u8F83\\u5C0F\\uFF0C\\u56E0\\u4E3A DOM API \\u672C\\u8EAB\\u7684\\u5F00\\u9500\\u662F\\u56FA\\u5B9A\\u7684\\u3002\"))), mdx(\"h3\", null, \"\\u6D4F\\u89C8\\u5668\\u7684\\u8FDB\\u7A0B\\u7BA1\\u7406\"), mdx(\"p\", null, \"\\u524D\\u9762\\u7684\\u8BA8\\u8BBA\\u90FD\\u96C6\\u4E2D\\u5728\\u6846\\u67B6\\u5C42\\u9762\\uFF0C\\u4F46\\u5B9E\\u9645\\u4E0A\\u8FD8\\u6709\\u4E00\\u4E2A\\u66F4\\u5E95\\u5C42\\u7684\\u73A9\\u5BB6\\uFF1A\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6D4F\\u89C8\\u5668\\u672C\\u8EAB\"), \"\\u3002\"), mdx(\"p\", null, \"\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u7684\\u67B6\\u6784\\u5927\\u81F4\\u662F\\uFF1A\\u6D4F\\u89C8\\u5668\\u8FDB\\u7A0B\\uFF08\\u4E3B\\u8FDB\\u7A0B\\uFF09\\u2192 GPU \\u8FDB\\u7A0B \\u2192 \\u6E32\\u67D3\\u8FDB\\u7A0B\\uFF08\\u6BCF\\u4E2A tab \\u4E00\\u4E2A\\uFF09\\u2192 \\u7F51\\u7EDC\\u8FDB\\u7A0B\\u3002\\u6E32\\u67D3\\u8FDB\\u7A0B\\u5185\\u90E8\\u53C8\\u6709\\u4E3B\\u7EBF\\u7A0B\\u3001\\u5408\\u6210\\u7EBF\\u7A0B\\u3001\\u5149\\u6805\\u7EBF\\u7A0B\\u7B49\\u3002\"), mdx(\"p\", null, \"JavaScript \\u8FD0\\u884C\\u5728\\u6E32\\u67D3\\u8FDB\\u7A0B\\u7684\\u4E3B\\u7EBF\\u7A0B\\u4E0A\\uFF0C\\u548C\\u6837\\u5F0F\\u8BA1\\u7B97\\u3001\\u5E03\\u5C40\\uFF08Layout\\uFF09\\u3001\\u7ED8\\u5236\\uFF08Paint\\uFF09\\u662F\\u540C\\u4E00\\u4E2A\\u7EBF\\u7A0B\\u3002\\u8FD9\\u610F\\u5473\\u7740\\u5982\\u679C JavaScript \\u6267\\u884C\\u65F6\\u95F4\\u592A\\u957F\\uFF0C\\u6D4F\\u89C8\\u5668\\u6765\\u4E0D\\u53CA\\u5728 16ms \\u5185\\u5B8C\\u6210\\u6837\\u5F0F\\u8BA1\\u7B97\\u3001\\u5E03\\u5C40\\u3001\\u7ED8\\u5236\\u548C\\u5408\\u6210\\uFF0C\\u5E27\\u5C31\\u4F1A\\u4E22\\uFF0C\\u7528\\u6237\\u5C31\\u4F1A\\u611F\\u89C9\\u5230\\u5361\\u3002\"), mdx(\"p\", null, \"React Fiber \\u7684\\u8BBE\\u8BA1\\u521D\\u8877\\u5C31\\u662F\\u4E3A\\u4E86\\u89E3\\u51B3\\u8FD9\\u4E2A\\u95EE\\u9898\\u3002\\u5728 Fiber \\u4E4B\\u524D\\uFF0CReact \\u7684 diff \\u662F\\u540C\\u6B65\\u9012\\u5F52\\u7684\\uFF0C\\u4E00\\u65E6\\u5F00\\u59CB\\u5C31\\u65E0\\u6CD5\\u4E2D\\u65AD\\uFF0C\\u5927\\u7EC4\\u4EF6\\u6811\\u7684 diff \\u53EF\\u80FD\\u5360\\u636E\\u4E3B\\u7EBF\\u7A0B\\u51E0\\u5341\\u6BEB\\u79D2\\u751A\\u81F3\\u4E0A\\u767E\\u6BEB\\u79D2\\u3002Fiber \\u628A\\u9012\\u5F52\\u6539\\u6210\\u4E86\\u5FAA\\u73AF + \\u94FE\\u8868\\uFF0C\\u6BCF\\u4E2A\\u8282\\u70B9\\u662F\\u4E00\\u4E2A Fiber \\u5BF9\\u8C61\\uFF0C\\u901A\\u8FC7 child\\u3001sibling\\u3001return \\u6307\\u9488\\u4E32\\u8054\\u3002\\u8C03\\u5EA6\\u5668\\u53EF\\u4EE5\\u5728\\u6BCF\\u4E2A\\u8282\\u70B9\\u4E4B\\u95F4\\u68C0\\u67E5\\\"\\u65F6\\u95F4\\u5230\\u4E86\\u6CA1\\\"\\uFF0C\\u5230\\u4E86\\u5C31\\u4E2D\\u65AD\\uFF0C\\u628A\\u63A7\\u5236\\u6743\\u8FD8\\u7ED9\\u6D4F\\u89C8\\u5668\\u3002\"), mdx(\"p\", null, \"\\u53E6\\u5916\\u4E00\\u4E2A\\u5BB9\\u6613\\u88AB\\u5FFD\\u89C6\\u7684\\u95EE\\u9898\\u662F\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5E03\\u5C40\\u6296\\u52A8\\uFF08Layout Thrashing\\uFF09\"), \"\\u3002\\u5982\\u679C JavaScript \\u4EA4\\u66FF\\u5730\\u8BFB\\u53D6\\u5E03\\u5C40\\u5C5E\\u6027\\uFF08offsetWidth\\u3001getBoundingClientRect\\uFF09\\u548C\\u4FEE\\u6539\\u6837\\u5F0F\\uFF0C\\u6D4F\\u89C8\\u5668\\u4F1A\\u88AB\\u8FEB\\u5728\\u6BCF\\u6B21\\u8BFB\\u53D6\\u65F6\\u91CD\\u65B0\\u8BA1\\u7B97\\u5E03\\u5C40\\uFF0C\\u56E0\\u4E3A\\\"\\u8BFB\\u53D6\\u5E03\\u5C40\\u5C5E\\u6027\\u4F1A\\u5F3A\\u5236\\u89E6\\u53D1\\u4E00\\u6B21\\u540C\\u6B65\\u5E03\\u5C40\\\"\\u3002\\u5728\\u6570\\u636E\\u9A71\\u52A8\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u8FD9\\u4E2A\\u95EE\\u9898\\u5927\\u90E8\\u5206\\u88AB\\u6846\\u67B6\\u6D88\\u5316\\u4E86\\u2014\\u2014\\u6846\\u67B6\\u5728\\u66F4\\u65B0 DOM \\u65F6\\u4F1A\\u5C3D\\u91CF\\u6279\\u91CF\\u64CD\\u4F5C\\uFF0C\\u5148\\u6539\\u6837\\u5F0F\\u518D\\u8BFB\\u5E03\\u5C40\\u3002\\u4F46\\u5982\\u679C\\u5728\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\\u91CC\\u4E0D\\u6CE8\\u610F\\uFF0C\\u8FD8\\u662F\\u4F1A\\u51FA\\u73B0\\u3002\"), mdx(\"h3\", null, \"Vue \\u548C React \\u4E2D\\u8BA1\\u7B97\\u4E0E\\u72B6\\u6001\\u7684\\u610F\\u4E49\"), mdx(\"p\", null, \"\\u6700\\u540E\\u56DE\\u5230\\u5F00\\u5934\\u63D0\\u5230\\u7684\\u90A3\\u4E2A\\u95EE\\u9898\\uFF1AVue \\u548C React \\u5728\\\"\\u8BA1\\u7B97\\\"\\u8FD9\\u4EF6\\u4E8B\\u4E0A\\u7684\\u6001\\u5EA6\\u5DEE\\u5F02\\u3002\"), mdx(\"p\", null, \"React \\u628A render \\u5F53\\u6210\\u8BA1\\u7B97\\uFF0C\\u8BA1\\u7B97\\u662F\\u5F00\\u53D1\\u8005\\u7684\\u8D23\\u4EFB\\u3002\\u4F60\\u53EF\\u4EE5\\u5199\\u51FA\\u975E\\u5E38\\u4F18\\u96C5\\u7684\\u3001\\u6570\\u636E\\u6A21\\u578B\\u9A71\\u52A8\\u7684 render \\u51FD\\u6570\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u5728 render \\u91CC\\u5199\\u4E00\\u5806 if-else \\u548C\\u903B\\u8F91\\u8FD0\\u7B97\\u3002React \\u4E0D\\u9650\\u5236\\u4F60\\uFF0C\\u4F46\\u8FD9\\u4E5F\\u610F\\u5473\\u7740\\u5982\\u679C\\u4F60\\u4E0D\\u5728\\u610F\\u72B6\\u6001\\u7684\\u8BBE\\u8BA1\\u548C render \\u7684\\u62C6\\u5206\\uFF0C\\u6027\\u80FD\\u95EE\\u9898\\u4F1A\\u5F88\\u5FEB\\u66B4\\u9732\\u51FA\\u6765\\u3002\"), mdx(\"p\", null, \"Vue \\u628A\\u8BA1\\u7B97\\u8FD9\\u4EF6\\u4E8B\\u5206\\u6210\\u4E86\\u51E0\\u5C42\\uFF1A\\u6A21\\u677F\\u8D1F\\u8D23\\u8F7B\\u91CF\\u7684\\u5C55\\u793A\\u903B\\u8F91\\uFF08v-if\\u3001v-for\\u3001\\u8868\\u8FBE\\u5F0F\\uFF09\\uFF0Ccomputed \\u8D1F\\u8D23\\u6D3E\\u751F\\u6570\\u636E \\uFF0Cwatch \\u8D1F\\u8D23\\u526F\\u4F5C\\u7528\\uFF0Cmethods \\u8D1F\\u8D23\\u4E8B\\u4EF6\\u5904\\u7406\\u3002\\u8FD9\\u79CD\\u5206\\u5C42\\u5F3A\\u5236\\u6027\\u5730\\u628A\\u8BA1\\u7B97\\u903B\\u8F91\\u4ECE\\u6A21\\u677F\\u4E2D\\u5265\\u79BB\\u51FA\\u6765\\uFF0C\\u67D0\\u79CD\\u7A0B\\u5EA6\\u4E0A\\u964D\\u4F4E\\u4E86\\\"\\u5199\\u51FA\\u7CDF\\u7CD5 render\\\"\\u7684\\u53EF\\u80FD\\u6027\\u3002\"), mdx(\"p\", null, \"\\u4E24\\u8005\\u6CA1\\u6709\\u7EDD\\u5BF9\\u7684\\u9AD8\\u4E0B\\u4E4B\\u5206\\u3002React \\u7684\\u81EA\\u7531\\u5EA6\\u8BA9\\u5B83\\u5728\\u590D\\u6742\\u573A\\u666F\\u4E0B\\u6709\\u66F4\\u5F3A\\u7684\\u8868\\u8FBE\\u80FD\\u529B\\uFF0CVue \\u7684\\u7EA6\\u675F\\u6027\\u8BA9\\u5B83\\u5728\\u5E38\\u89C4\\u4E1A\\u52A1\\u573A\\u666F\\u4E0B\\u66F4\\u4E0D\\u5BB9\\u6613\\u51FA\\u95EE\\u9898\\u3002\\u4F46\\u5B83\\u4EEC\\u80CC\\u540E\\u7684\\u6838\\u5FC3\\u903B\\u8F91\\u662F\\u4E00\\u6837\\u7684\\uFF1A\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u7CBE\\u5FC3\\u8BBE\\u8BA1\\u72B6\\u6001\\u6A21\\u578B\\uFF0C\\u6700\\u5C0F\\u5316\\u72B6\\u6001\\u53D8\\u66F4\\u7684\\u6CE2\\u53CA\\u8303\\u56F4\\uFF0C\\u8BA9\\u89C6\\u56FE\\u7684\\u8BA1\\u7B97\\u5C3D\\u53EF\\u80FD\\u8F7B\\u91CF\\u3002\")), mdx(\"p\", null, \"\\u6570\\u636E\\u9A71\\u52A8\\u6A21\\u5F0F\\u628A\\\"\\u600E\\u4E48\\u64CD\\u4F5C DOM\\\"\\u8FD9\\u4E2A\\u95EE\\u9898\\u4EA4\\u7ED9\\u4E86\\u6846\\u67B6\\uFF0C\\u4F46\\u628A\\\"\\u600E\\u4E48\\u8BBE\\u8BA1\\u72B6\\u6001\\\"\\u8FD9\\u4E2A\\u95EE\\u9898\\u7559\\u7ED9\\u4E86\\u5F00\\u53D1\\u8005\\u3002\\u72B6\\u6001\\u8BBE\\u8BA1\\u5F97\\u597D\\u7684\\u5E94\\u7528\\uFF0C\\u89C6\\u56FE\\u5C42\\u81EA\\u7136\\u800C\\u7136\\u5C31\\u6E05\\u6670\\uFF1B\\u72B6\\u6001\\u8BBE\\u8BA1\\u5F97\\u70C2\\u7684\\u5E94\\u7528\\uFF0C\\u518D\\u600E\\u4E48\\u4F18\\u5316 render \\u4E5F\\u6551\\u4E0D\\u56DE\\u6765\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u5927\\u6982\\u5C31\\u662F\\\"\\u6570\\u636E\\u9A71\\u52A8\\\"\\u8FD9\\u4E2A\\u6A21\\u5F0F\\u7684\\u672C\\u8D28\\u2014\\u2014\\u6846\\u67B6\\u7BA1\\u7684\\u662F\\u673A\\u5236\\uFF0C\\u5F00\\u53D1\\u8005\\u7BA1\\u7684\\u662F\\u8BBE\\u8BA1\\u3002\\u673A\\u5236\\u518D\\u597D\\uFF0C\\u8BBE\\u8BA1\\u4E0D\\u884C\\uFF0C\\u767D\\u642D\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/learn-from-chrome/learn-from-chrome.md","id":"80f622c2-3eb0-505b-9993-46d05150698a","parent":{"name":"learn-from-chrome","sourceInstanceName":"blog"},"excerpt":"想让读者了解的事情 在阅读这篇关于 Chrome 技术实现的文章前，希望你能理解： 标准化的力量  - 原生 Web 标准往往是最优的解决方案 组件化的本质  - Web Components 提供了真正的封装和复用能力 未来技术的前瞻性  - 理解新技术趋势对技术选型的重要性 工程化的平衡  - 性能、开发体验、可维护性之间的权衡 学习的方法论  - 从优秀项目中汲取经验，举一反三 PS: 在你的 Chrome 浏览器里面输入  chrome://welcome…","fields":{"title":"🍻 跟着 Chrome 学技术","slug":"/blog/learn-from-chrome","description":"Chrome 是一个很优秀的浏览器，好奇查看了一些页面的源代码，发现很多我们值得学习的技术和能力，面向大佬编程，奥利给！","date":"2020-11-17","redirects":null,"datetime":"2020-11-17 22:50:20","categories":["code"],"series":null,"tags":["整理","思考","功能"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","思考","功能"],"theme":null,"slug":"learn-from-chrome","date":"2020-11-17 22:50:20"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"learn-from-chrome\",\n  \"title\": \"🍻 跟着 Chrome 学技术\",\n  \"date\": \"2020-11-17 22:50:20\",\n  \"author\": \"Ubug\",\n  \"description\": \"Chrome 是一个很优秀的浏览器，好奇查看了一些页面的源代码，发现很多我们值得学习的技术和能力，面向大佬编程，奥利给！\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"整理\", \"思考\", \"功能\"],\n  \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"\\u60F3\\u8BA9\\u8BFB\\u8005\\u4E86\\u89E3\\u7684\\u4E8B\\u60C5\"), mdx(\"p\", null, \"\\u5728\\u9605\\u8BFB\\u8FD9\\u7BC7\\u5173\\u4E8E Chrome \\u6280\\u672F\\u5B9E\\u73B0\\u7684\\u6587\\u7AE0\\u524D\\uFF0C\\u5E0C\\u671B\\u4F60\\u80FD\\u7406\\u89E3\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6807\\u51C6\\u5316\\u7684\\u529B\\u91CF\"), \" - \\u539F\\u751F Web \\u6807\\u51C6\\u5F80\\u5F80\\u662F\\u6700\\u4F18\\u7684\\u89E3\\u51B3\\u65B9\\u6848\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u7EC4\\u4EF6\\u5316\\u7684\\u672C\\u8D28\"), \" - Web Components \\u63D0\\u4F9B\\u4E86\\u771F\\u6B63\\u7684\\u5C01\\u88C5\\u548C\\u590D\\u7528\\u80FD\\u529B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u672A\\u6765\\u6280\\u672F\\u7684\\u524D\\u77BB\\u6027\"), \" - \\u7406\\u89E3\\u65B0\\u6280\\u672F\\u8D8B\\u52BF\\u5BF9\\u6280\\u672F\\u9009\\u578B\\u7684\\u91CD\\u8981\\u6027\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5DE5\\u7A0B\\u5316\\u7684\\u5E73\\u8861\"), \" - \\u6027\\u80FD\\u3001\\u5F00\\u53D1\\u4F53\\u9A8C\\u3001\\u53EF\\u7EF4\\u62A4\\u6027\\u4E4B\\u95F4\\u7684\\u6743\\u8861\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5B66\\u4E60\\u7684\\u65B9\\u6CD5\\u8BBA\"), \" - \\u4ECE\\u4F18\\u79C0\\u9879\\u76EE\\u4E2D\\u6C72\\u53D6\\u7ECF\\u9A8C\\uFF0C\\u4E3E\\u4E00\\u53CD\\u4E09\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"PS: \\u5728\\u4F60\\u7684 Chrome \\u6D4F\\u89C8\\u5668\\u91CC\\u9762\\u8F93\\u5165 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"chrome://welcome/\"\n  }, \"chrome://welcome/\"), \"\\uFF0C\\u6211\\u4EEC\\u4ECE\\u8FD9\\u91CC\\u5F00\\u59CB\")), mdx(\"h2\", null, \"\\u4E00\\u3001\\u89C2\\u5176\\u884C\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"950px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/53aebb0377abf73033da6d1e0a0b9a5b/444ca/index.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"47.10424710424711%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABnElEQVQoz21SW3KjMBDkJokBgZ4gwDyMY2xMHCeV/djk/nfpbZTE5a3KR9eoRpqe7hlFxjj0w4iu36GqWySJwMPDI6qqwfF0Zn4M+brpsG17+GqL0jc8D7DOQykLpS2Ksg530fpw3E9MOmS5DpfSWDgSVt7D8pwmMTZxgk2SsmFCpIiJVAgIkQWkaYpcSkTKD5gv71iWS+iaSw1tDEx/wDQvuB52VLeFNwqlytjQQOY5cpEGkq8GXxBsEKlqj2l5x8xiR9mrQmNZ1E2oqfCpJFHpMRQGg5PoGDun0BNeS2QkuRFmGaLpOOLj8wPz+RldN3AONWxRoqk9qraBJJn1BXMOZiX4VrWq+0HynQsK973C2/WM6+ufsIB1yNZSpZKwlUcmFYwUsEpASxGK4jj5z2p6TzgOBi+XE/ZPJ1otg+WyKGj5gLLdoafSgttrjITTmm8sdC5uJDeVP4SHncbn3zfMyzWsfv1Gha+Q+y0Ut+ZkBsloGG1OMBpG8Qthts6w5bd5ubxS4ZF/rw0KRRh0HKzFwVYc4j3urd4r/Ad0ZhG5M6mpmQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"index.html\",\n    \"title\": \"index.html\",\n    \"src\": \"/static/53aebb0377abf73033da6d1e0a0b9a5b/444ca/index.png\",\n    \"srcSet\": [\"/static/53aebb0377abf73033da6d1e0a0b9a5b/2c191/index.png 259w\", \"/static/53aebb0377abf73033da6d1e0a0b9a5b/86b01/index.png 518w\", \"/static/53aebb0377abf73033da6d1e0a0b9a5b/444ca/index.png 950w\"],\n    \"sizes\": \"(max-width: 950px) 100vw, 950px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"index.html\"), \"\\n  \")), mdx(\"p\", null, \"\\u80FD\\u770B\\u5230\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u4E86 ES Module\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u4E86 Web Component\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u4E86\\u6697\\u9ED1\\u7684 CSS Query\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u4E86 CSS \\u53D8\\u91CF\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"css \\u5C45\\u7136\\u653E\\u5230\\u4E86\\u6700\\u540E \\uD83D\\uDC7F\\uD83D\\uDC7E\\uD83D\\uDC80\")), mdx(\"p\", null, \"\\u4EE3\\u7801\\u5F88\\u7B80\\u6D01\\uFF0C\\u4E3B\\u8981\\u662F\\u56E0\\u4E3A\\u7528\\u4E86 Web Component\\uFF1B\\u7528\\u4E86\\u5F88\\u591A\\u65B0\\u7684\\u6280\\u672F\\uFF0C\\u56E0\\u4E3A\\u8DDF\\u6D4F\\u89C8\\u5668\\u7ED1\\u5B9A\\uFF0C\\u5012\\u662F\\u4E00\\u70B9\\u4E0D\\u7528\\u62C5\\u5FC3\\u517C\\u5BB9\\u95EE\\u9898 \\uD83D\\uDE02\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"956px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/adf8d3384c531600a5e1f8ca9f2df775/89866/app.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"59.45945945945946%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAACIUlEQVQoz2WTa27bMBCEdZQ0Fp+SKFLU244TN7ZT1EiDBr3/VaZDOm5T9MdgKQn8PDu7LrSxmOYtxmlF6AYIqWGrGrEfUdUN5eDaDp7fYj+h9TE/p3PtArSpYWyd3yUVPkRsd4+oKgepLD9W6LoZoeow6jsM+h5rrfDoDZZGY+d0rrFScEZCK4VSCJRlCcVzoZseu+cLTscz+mFBchzaGUvY4XU0eJsavMQK587iidBgFRotYKSAFGUGbTabLEFwYf2Mh9MbgafcjmG7Q1wRmxEHrzIouUkQT0fJzd39Bl+SCLn/gCUleLFuZ7y//8Dx9I1ZLnA+IIYBni5tnOBcj8GyzVpgZutbtjyyRiv5IxKKLjUlPpwWMRh8f9nhdL5gWXfM0WBghkP/hGr7FfVygJ/2mPoBawzYjxG76DHzPLsa+/aaa2QUmjEUPVt6vRzwsH9Gw6lJbdB3I7xnnsMWul/pdEFdBUy1IcBgJSBUOgOMpDtR/m15iAa/fh7Z8oVr03NlHNrWEWBRGV5SEkbrPEEhU4aSVUEmpQmX4pphbpnAwEEcn895dQKzS3vnvYetW5jGw/BZG0OAvLr4NISrq82fSWeHFS82ruOlCkonWQK5sFxWyZ1UfJ+d0UmCiuRQ3M7iH1gGpk1PIGObrAT2bcvpUq3nwte55SSZQTfJXP8D3kA3JUeRWXYEBtcwS/5zqL6xsATUSsBxJ+1HTUP5DPwNdpNuDprnnEQAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"welcome_app.js\",\n    \"title\": \"welcome_app.js\",\n    \"src\": \"/static/adf8d3384c531600a5e1f8ca9f2df775/89866/app.png\",\n    \"srcSet\": [\"/static/adf8d3384c531600a5e1f8ca9f2df775/2c191/app.png 259w\", \"/static/adf8d3384c531600a5e1f8ca9f2df775/86b01/app.png 518w\", \"/static/adf8d3384c531600a5e1f8ca9f2df775/89866/app.png 956w\"],\n    \"sizes\": \"(max-width: 956px) 100vw, 956px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"welcome_app.js\"), \"\\n  \")), mdx(\"p\", null, \"\\u80FD\\u770B\\u5230\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u662F\\u4E00\\u4E2A SPA \\u5E94\\u7528\\uFF0C\\u540E\\u7EED\\u7684\\u529F\\u80FD\\u90FD\\u5728\\u8FD9\\u4E00\\u4E2A\\u9875\\u9762\\u91CC\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u4E86 Polymer.js \\u4F5C\\u4E3A Web Component \\u6846\\u67B6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5728 cr_elements \\u91CC\\u5E94\\u8BE5\\u662F\\u7EC4\\u4EF6\\u5E93\\uFF0CWeb Component \\u89C4\\u8303\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u81EA\\u884C\\u5B9E\\u73B0\\u4E86\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u8DEF\\u7531\\u884C\\u4E3A\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u4E86 JSDoc\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5B9A\\u4E49\\u4E86\\u4E00\\u5957 Proxy \\u673A\\u5236\\u548C\\u539F\\u751F\\u7684\\u6D4F\\u89C8\\u5668\\u901A\\u4FE1\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6CA1\\u6709\\u4F7F\\u7528\\u9884\\u7F16\\u8BD1\\u6253\\u5305\\uFF01\")), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u8BE6\\u5176\\u4E49\"), mdx(\"h3\", null, \"2.1 Web Component + ES Module\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u5F00\\u53D1\\u6A21\\u5F0F\\u5E94\\u8BE5\\u7B97\\u662F\\u9762\\u5411\\u6D4F\\u89C8\\u5668\\u6807\\u51C6\\u4E86\\uFF0C\\u7EC4\\u4EF6\\u5316\\u5F00\\u53D1\\u76DB\\u884C\\u7684\\u73B0\\u5728\\uFF0C\\u539F\\u751F ES \\u6807\\u51C6\\u7ED9\\u51FA\\u7684\\u7B54\\u6848\\u597D\\u50CF\\u662F WebComponent \\u7684\\u5E94\\u7528\\uFF0C\\u4E4B\\u524D\\u5C1D\\u8BD5\\u8FC7\\uFF0C\\u611F\\u89C9\\u8FD8\\u662F\\u4E0D\\u9519\\u7684\\uFF0C\\u4E0D\\u8FC7\\u9700\\u8981\\u6709\\u66F4\\u53CB\\u597D\\u7684\\u5F00\\u53D1\\u5DE5\\u5177\\u624D\\u80FD\\u66F4\\u8212\\u670D\\uFF0C\\u800C\\u4E14\\u517C\\u5BB9\\u6027\\u7684\\u95EE\\u9898\\u77ED\\u65F6\\u95F4\\u5185\\u8FD8\\u65E0\\u6CD5\\u5B8C\\u5168\\u8BA9\\u4EBA\\u653E\\u5FC3\\uFF0C\\u4E0D\\u8FC7\\u9762\\u5411\\u672A\\u6765\\u7684\\u65B9\\u6848\\u8FD8\\u662F\\u5F88\\u503C\\u5F97\\u6295\\u5165\\u8C03\\u7814\\u7684\\u3002\"), mdx(\"h3\", null, \"2.2 \\u6280\\u672F\\u9009\\u578B\\u7684\\u542F\\u793A\"), mdx(\"p\", null, \"Chrome \\u7684\\u6280\\u672F\\u5B9E\\u73B0\\u7ED9\\u6211\\u4EEC\\u5E26\\u6765\\u51E0\\u4E2A\\u91CD\\u8981\\u542F\\u793A\\uFF1A\"), mdx(\"h4\", null, \"1. \\u6807\\u51C6\\u4F18\\u5148\"), mdx(\"p\", null, \"Chrome \\u56E2\\u961F\\u9009\\u62E9\\u4E86\\u539F\\u751F\\u7684 Web \\u6807\\u51C6\\uFF0C\\u800C\\u4E0D\\u662F\\u4F9D\\u8D56\\u7B2C\\u4E09\\u65B9\\u6846\\u67B6\\u3002\\u8FD9\\u6837\\u505A\\u7684\\u597D\\u5904\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u65E0\\u989D\\u5916\\u4F9D\\u8D56\"), \"\\uFF1A\\u51CF\\u5C11\\u5305\\u4F53\\u79EF\\uFF0C\\u63D0\\u9AD8\\u52A0\\u8F7D\\u901F\\u5EA6\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u66F4\\u597D\\u7684\\u517C\\u5BB9\\u6027\"), \"\\uFF1A\\u6D4F\\u89C8\\u5668\\u539F\\u751F\\u652F\\u6301\\uFF0C\\u4E0D\\u7528\\u62C5\\u5FC3\\u7248\\u672C\\u95EE\\u9898\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u672A\\u6765\\u53EF\\u7EF4\\u62A4\\u6027\"), \"\\uFF1A\\u6807\\u51C6\\u662F\\u7A33\\u5B9A\\u7684\\uFF0C\\u4E0D\\u4F1A\\u9891\\u7E41\\u53D8\\u5316\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6027\\u80FD\\u4F18\\u52BF\"), \"\\uFF1A\\u539F\\u751F\\u5B9E\\u73B0\\u901A\\u5E38\\u6BD4\\u6846\\u67B6\\u66F4\\u9AD8\\u6548\")), mdx(\"h4\", null, \"2. \\u7EC4\\u4EF6\\u5316\\u601D\\u7EF4\"), mdx(\"p\", null, \"Web Components \\u63D0\\u4F9B\\u4E86\\u771F\\u6B63\\u7684\\u5C01\\u88C5\\u80FD\\u529B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"// \\u81EA\\u5B9A\\u4E49\\u5143\\u7D20\\u7684\\u5B9E\\u73B0\\u793A\\u4F8B\\nclass WelcomeElement extends HTMLElement {\\n  constructor() {\\n    super();\\n    this.attachShadow({ mode: 'open' });\\n    this.render();\\n  }\\n\\n  render() {\\n    this.shadowRoot.innerHTML = `\\n      <style>\\n        :host {\\n          display: block;\\n          padding: 20px;\\n        }\\n      </style>\\n      <slot></slot>\\n    `;\\n  }\\n}\\n\\ncustomElements.define('welcome-element', WelcomeElement);\\n\")), mdx(\"h4\", null, \"3. \\u5F00\\u53D1\\u4F53\\u9A8C\\u7684\\u5E73\\u8861\"), mdx(\"p\", null, \"Chrome \\u6E90\\u7801\\u4E2D\\u7684\\u4E00\\u4E9B\\u8BBE\\u8BA1\\u8003\\u8651\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u4EE3\\u7801\\u7B80\\u6D01\"), \"\\uFF1A\\u4F7F\\u7528\\u9AD8\\u7EA7\\u62BD\\u8C61\\uFF0C\\u51CF\\u5C11\\u5197\\u4F59\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6587\\u6863\\u5B8C\\u6574\"), \"\\uFF1AJSDoc \\u63D0\\u4F9B\\u4E86\\u826F\\u597D\\u7684\\u4EE3\\u7801\\u6587\\u6863\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6A21\\u5757\\u5316\"), \"\\uFF1A\\u6E05\\u6670\\u7684\\u6A21\\u5757\\u5212\\u5206\\uFF0C\\u804C\\u8D23\\u660E\\u786E\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6E10\\u8FDB\\u589E\\u5F3A\"), \"\\uFF1A\\u4ECE\\u57FA\\u7840\\u529F\\u80FD\\u5F00\\u59CB\\uFF0C\\u9010\\u6B65\\u6DFB\\u52A0\\u9AD8\\u7EA7\\u7279\\u6027\")), mdx(\"h3\", null, \"2.3 \\u67B6\\u6784\\u8BBE\\u8BA1\\u7684\\u601D\\u8003\"), mdx(\"h4\", null, \"\\u5355\\u9875\\u5E94\\u7528\\u7684\\u8BBE\\u8BA1\"), mdx(\"p\", null, \"Chrome \\u6B22\\u8FCE\\u9875\\u91C7\\u7528 SPA \\u6A21\\u5F0F\\uFF0C\\u8FD9\\u80CC\\u540E\\u6709\\u5176\\u6DF1\\u5C42\\u539F\\u56E0\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u4E00\\u81F4\\u6027\\u4F53\\u9A8C\"), \"\\uFF1A\\u6240\\u6709\\u529F\\u80FD\\u5728\\u540C\\u4E00\\u4E2A\\u4E0A\\u4E0B\\u6587\\u4E2D\\uFF0C\\u907F\\u514D\\u9875\\u9762\\u8DF3\\u8F6C\\u7684\\u5272\\u88C2\\u611F\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6027\\u80FD\\u4F18\\u5316\"), \"\\uFF1A\\u51CF\\u5C11\\u91CD\\u590D\\u52A0\\u8F7D\\uFF0C\\u63D0\\u9AD8\\u54CD\\u5E94\\u901F\\u5EA6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u72B6\\u6001\\u7BA1\\u7406\"), \"\\uFF1A\\u5168\\u5C40\\u72B6\\u6001\\u66F4\\u5BB9\\u6613\\u7EF4\\u62A4\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u4EE3\\u7801\\u7EC4\\u7EC7\"), \"\\uFF1A\\u6240\\u6709\\u76F8\\u5173\\u4EE3\\u7801\\u96C6\\u4E2D\\u7BA1\\u7406\")), mdx(\"p\", null, \"\\u4F46 SPA \\u4E5F\\u6709\\u5176\\u7F3A\\u70B9\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"SEO \\u56F0\\u96BE\"), \"\\uFF1A\\u641C\\u7D22\\u5F15\\u64CE\\u7D22\\u5F15\\u95EE\\u9898\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u9996\\u5C4F\\u6027\\u80FD\"), \"\\uFF1A\\u9700\\u8981\\u52A0\\u8F7D\\u6240\\u6709\\u4EE3\\u7801\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5386\\u53F2\\u7BA1\\u7406\"), \"\\uFF1A\\u9700\\u8981\\u989D\\u5916\\u5B9E\\u73B0\\u8DEF\\u7531\\u673A\\u5236\")), mdx(\"p\", null, \"Chrome \\u56E2\\u961F\\u9009\\u62E9\\u4E86\\u7B80\\u5355\\u7C97\\u66B4\\u7684\\u65B9\\u5F0F\\uFF1A\\u81EA\\u5DF1\\u5B9E\\u73B0\\u8DEF\\u7531\\uFF0C\\u800C\\u4E0D\\u4F9D\\u8D56\\u6846\\u67B6\\u3002\"), mdx(\"h4\", null, \"\\u901A\\u4FE1\\u673A\\u5236\\u7684\\u8BBE\\u8BA1\"), mdx(\"p\", null, \"Chrome \\u6E90\\u7801\\u4E2D\\u6709\\u4E00\\u4E2A interesting \\u7684\\u8BBE\\u8BA1\\uFF1A\\u4ED6\\u4EEC\\u5B9E\\u73B0\\u4E86\\u4E00\\u5957 Proxy \\u673A\\u5236\\u4E0E\\u539F\\u751F\\u6D4F\\u89C8\\u5668\\u901A\\u4FE1\\u3002\\u8FD9\\u79CD\\u8BBE\\u8BA1\\u6709\\u51E0\\u4E2A\\u4F18\\u52BF\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u89E3\\u8026\"), \"\\uFF1A\\u4E1A\\u52A1\\u903B\\u8F91\\u4E0E\\u6D4F\\u89C8\\u5668\\u529F\\u80FD\\u5206\\u79BB\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5B89\\u5168\\u6027\"), \"\\uFF1A\\u901A\\u8FC7\\u4EE3\\u7406\\u63A7\\u5236\\u8BBF\\u95EE\\u6743\\u9650\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u53EF\\u6269\\u5C55\\u6027\"), \"\\uFF1A\\u53EF\\u4EE5\\u8F7B\\u677E\\u6DFB\\u52A0\\u65B0\\u7684\\u901A\\u4FE1\\u65B9\\u5F0F\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6027\\u80FD\"), \"\\uFF1A\\u76F4\\u63A5\\u8C03\\u7528\\u539F\\u751F API\\uFF0C\\u51CF\\u5C11\\u4E2D\\u95F4\\u5C42\")), mdx(\"h3\", null, \"2.4 \\u6027\\u80FD\\u4F18\\u5316\\u7684\\u5B9E\\u8DF5\"), mdx(\"h4\", null, \"1. CSS \\u653E\\u7F6E\\u7B56\\u7565\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"/* \\u5E38\\u89C4\\u505A\\u6CD5 */\\n<head>\\n  <style>\\n    /* \\u6837\\u5F0F\\u653E\\u5728\\u5934\\u90E8\\uFF0C\\u963B\\u585E\\u6E32\\u67D3 */\\n  </style>\\n</head>\\n\\n/* Chrome \\u7684\\u505A\\u6CD5 */\\n<body>\\n  <!-- \\u5185\\u5BB9\\u5148\\u6E32\\u67D3 -->\\n</body>\\n<style>\\n  /* \\u6837\\u5F0F\\u653E\\u5728\\u6700\\u540E\\uFF0C\\u4E0D\\u963B\\u585E\\u6E32\\u67D3 */\\n</style>\\n\")), mdx(\"p\", null, \"\\u8FD9\\u79CD\\u7B56\\u7565\\u7684\\u539F\\u56E0\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u51CF\\u5C11\\u963B\\u585E\"), \"\\uFF1A\\u6D4F\\u89C8\\u5668\\u53EF\\u4EE5\\u8FB9\\u89E3\\u6790\\u8FB9\\u6E32\\u67D3\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u4F18\\u5316\\u7528\\u6237\\u4F53\\u9A8C\"), \"\\uFF1A\\u7528\\u6237\\u80FD\\u66F4\\u5FEB\\u770B\\u5230\\u5185\\u5BB9\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5E76\\u884C\\u5904\\u7406\"), \"\\uFF1ACSS \\u89E3\\u6790\\u4E0E HTML \\u6E32\\u67D3\\u53EF\\u4EE5\\u5E76\\u884C\")), mdx(\"h4\", null, \"2. \\u6309\\u9700\\u52A0\\u8F7D\"), mdx(\"p\", null, \"\\u867D\\u7136\\u662F\\u5355\\u9875\\u5E94\\u7528\\uFF0C\\u4F46 Chrome \\u91C7\\u7528\\u4E86\\u7EC4\\u4EF6\\u5316\\u8BBE\\u8BA1\\uFF0C\\u5B9E\\u73B0\\u4E86\\u6309\\u9700\\u52A0\\u8F7D\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"// \\u7EC4\\u4EF6\\u61D2\\u52A0\\u8F7D\\nconst loadComponent = async (name) => {\\n  const module = await import(`./components/${name}.js`);\\n  return module.default;\\n};\\n\\n// \\u52A8\\u6001\\u521B\\u5EFA\\u7EC4\\u4EF6\\nconst element = document.createElement('welcome-element');\\ndocument.body.appendChild(element);\\n\")), mdx(\"h3\", null, \"2.5 \\u5F00\\u53D1\\u5DE5\\u5177\\u7684\\u9009\\u62E9\"), mdx(\"h4\", null, \"\\u4E3A\\u4EC0\\u4E48\\u4E0D\\u7528\\u6784\\u5EFA\\u5DE5\\u5177\\uFF1F\"), mdx(\"p\", null, \"Chrome \\u6E90\\u7801\\u6709\\u51E0\\u4E2A\\u660E\\u663E\\u7279\\u70B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u65E0\\u9884\\u7F16\\u8BD1\"), \"\\uFF1A\\u76F4\\u63A5\\u4F7F\\u7528\\u539F\\u751F JavaScript\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6A21\\u5757\\u5316\"), \"\\uFF1A\\u4F7F\\u7528 ES Module \\u6807\\u51C6\\u5316\\u6A21\\u5757\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6587\\u4EF6\\u7EC4\\u7EC7\"), \"\\uFF1A\\u6309\\u7167\\u529F\\u80FD\\u6A21\\u5757\\u7EC4\\u7EC7\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u7C7B\\u578B\\u68C0\\u67E5\"), \"\\uFF1A\\u53EF\\u80FD\\u4F7F\\u7528 JSDoc \\u6216 TypeScript \\u7C7B\\u578B\")), mdx(\"p\", null, \"\\u8FD9\\u79CD\\u9009\\u62E9\\u7684\\u539F\\u56E0\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5F00\\u53D1\\u6548\\u7387\"), \"\\uFF1A\\u7701\\u53BB\\u6784\\u5EFA\\u65F6\\u95F4\\uFF0C\\u5FEB\\u901F\\u8FED\\u4EE3\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u8C03\\u8BD5\\u53CB\\u597D\"), \"\\uFF1A\\u53EF\\u4EE5\\u76F4\\u63A5\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u8C03\\u8BD5\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u751F\\u4EA7\\u4F18\\u5316\"), \"\\uFF1A\\u6D4F\\u89C8\\u5668\\u672C\\u8EAB\\u4F1A\\u8FDB\\u884C\\u4F18\\u5316\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5B66\\u4E60\\u6210\\u672C\"), \"\\uFF1A\\u964D\\u4F4E\\u6846\\u67B6\\u4F9D\\u8D56\\uFF0C\\u66F4\\u4E13\\u6CE8\\u4E8E\\u4E1A\\u52A1\")), mdx(\"h4\", null, \"3. \\u6697\\u9ED1\\u6A21\\u5F0F\\u7684\\u6280\\u672F\\u5B9E\\u73B0\"), mdx(\"p\", null, \"Chrome \\u7684\\u6697\\u9ED1\\u6A21\\u5F0F\\u5B9E\\u73B0\\u5F88\\u6709\\u7279\\u8272\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"/* \\u4F7F\\u7528 CSS \\u53D8\\u91CF\\u548C\\u5A92\\u4F53\\u67E5\\u8BE2 */\\n:root {\\n  --bg-color: #ffffff;\\n  --text-color: #000000;\\n}\\n\\n@media (prefers-color-scheme: dark) {\\n  :root {\\n    --bg-color: #1a1a1a;\\n    --text-color: #ffffff;\\n  }\\n}\\n\\n/* \\u4F7F\\u7528 CSS \\u67E5\\u8BE2\\u9009\\u62E9\\u5668 */\\n.container {\\n  background-color: var(--bg-color);\\n  color: var(--text-color);\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u79CD\\u8BBE\\u8BA1\\u7684\\u597D\\u5904\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u7CFB\\u7EDF\\u7EA7\\u9002\\u914D\"), \"\\uFF1A\\u8DDF\\u968F\\u7CFB\\u7EDF\\u8BBE\\u7F6E\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6027\\u80FD\\u53CB\\u597D\"), \"\\uFF1A\\u7EAF CSS \\u5B9E\\u73B0\\uFF0C\\u65E0 JavaScript \\u5F00\\u9500\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6613\\u4E8E\\u7EF4\\u62A4\"), \"\\uFF1A\\u96C6\\u4E2D\\u7BA1\\u7406\\u4E3B\\u9898\\u53D8\\u91CF\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u53EF\\u6269\\u5C55\\u6027\"), \"\\uFF1A\\u53EF\\u4EE5\\u8F7B\\u677E\\u6DFB\\u52A0\\u66F4\\u591A\\u4E3B\\u9898\")), mdx(\"h3\", null, \"2.6 \\u5BF9\\u6211\\u4EEC\\u9879\\u76EE\\u7684\\u542F\\u793A\"), mdx(\"p\", null, \"\\u57FA\\u4E8E Chrome \\u7684\\u5B9E\\u8DF5\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u53CD\\u601D\\u81EA\\u5DF1\\u7684\\u9879\\u76EE\\uFF1A\"), mdx(\"h4\", null, \"1. \\u6280\\u672F\\u9009\\u578B\\u7684\\u539F\\u5219\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u4F18\\u5148\\u9009\\u62E9\\u6807\\u51C6\"), \"\\uFF1A\\u539F\\u751F\\u6807\\u51C6\\u901A\\u5E38\\u662F\\u6700\\u4F18\\u89E3\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u8C28\\u614E\\u5F15\\u5165\\u6846\\u67B6\"), \"\\uFF1A\\u6846\\u67B6\\u662F\\u6709\\u6210\\u672C\\u7684\\uFF08\\u5B66\\u4E60\\u6210\\u672C\\u3001\\u7EF4\\u62A4\\u6210\\u672C\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u4FDD\\u6301\\u7B80\\u5355\"), \"\\uFF1A\\u7B80\\u5355\\u7684\\u65B9\\u6848\\u5F80\\u5F80\\u66F4\\u53EF\\u9760\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5173\\u6CE8\\u6027\\u80FD\"), \"\\uFF1A\\u6027\\u80FD\\u4E0D\\u662F\\u4F18\\u5316\\u51FA\\u6765\\u7684\\uFF0C\\u8BBE\\u8BA1\\u51FA\\u6765\\u7684\")), mdx(\"h4\", null, \"2. \\u67B6\\u6784\\u8BBE\\u8BA1\\u7684\\u601D\\u8003\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"// \\u4E00\\u4E2A\\u7B80\\u5355\\u4F46\\u7075\\u6D3B\\u7684\\u67B6\\u6784\\u8BBE\\u8BA1\\ninterface AppArchitecture {\\n  // \\u6838\\u5FC3\\u529F\\u80FD\\n  core: {\\n    router: Router;\\n    state: StateManager;\\n    components: ComponentRegistry;\\n  };\\n\\n  // \\u6269\\u5C55\\u529F\\u80FD\\n  plugins: Plugin[];\\n\\n  // \\u5DE5\\u5177\\u94FE\\n  utils: {\\n    logger: Logger;\\n    storage: Storage;\\n    api: API;\\n  };\\n}\\n\")), mdx(\"h4\", null, \"3. \\u5F00\\u53D1\\u6D41\\u7A0B\\u7684\\u5EFA\\u8BAE\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6E10\\u8FDB\\u5F0F\\u5F00\\u53D1\"), \"\\uFF1A\\u4ECE\\u7B80\\u5355\\u5F00\\u59CB\\uFF0C\\u9010\\u6B65\\u5B8C\\u5584\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6587\\u6863\\u5148\\u884C\"), \"\\uFF1A\\u597D\\u7684\\u6587\\u6863\\u6BD4\\u4EE3\\u7801\\u66F4\\u91CD\\u8981\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6D4B\\u8BD5\\u9A71\\u52A8\"), \"\\uFF1A\\u6D4B\\u8BD5\\u662F\\u8D28\\u91CF\\u7684\\u4FDD\\u969C\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6301\\u7EED\\u96C6\\u6210\"), \"\\uFF1A\\u81EA\\u52A8\\u5316\\u4FDD\\u8BC1\\u4EE3\\u7801\\u8D28\\u91CF\")), mdx(\"p\", null, \"Chrome \\u7684\\u6E90\\u7801\\u5C55\\u793A\\u4E86\\u4E00\\u79CD\\u4E0D\\u540C\\u7684\\u5F00\\u53D1\\u54F2\\u5B66\\uFF1A\\u7B80\\u5355\\u3001\\u76F4\\u63A5\\u3001\\u9762\\u5411\\u672A\\u6765\\u3002\\u4ED6\\u4EEC\\u6CA1\\u6709\\u4F7F\\u7528\\u6700\\u6D41\\u884C\\u7684\\u6846\\u67B6\\uFF0C\\u800C\\u662F\\u9009\\u62E9\\u4E86\\u6700\\u5408\\u9002\\u7684\\u6807\\u51C6\\u3002\\u8FD9\\u63D0\\u9192\\u6211\\u4EEC\\uFF0C\\u6280\\u672F\\u9009\\u578B\\u4E0D\\u662F\\u8FFD\\u6C42\\u6F6E\\u6D41\\uFF0C\\u800C\\u662F\\u9009\\u62E9\\u6700\\u9002\\u5408\\u9879\\u76EE\\u7684\\u65B9\\u6848\\u3002\"), mdx(\"h3\", null, \"2.7 \\u672A\\u6765\\u6280\\u672F\\u7684\\u53D1\\u5C55\\u8D8B\\u52BF\"), mdx(\"p\", null, \"\\u4ECE Chrome \\u7684\\u5B9E\\u8DF5\\u4E2D\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u770B\\u5230\\u51E0\\u4E2A\\u91CD\\u8981\\u8D8B\\u52BF\\uFF1A\"), mdx(\"h4\", null, \"1. Web Components \\u7684\\u666E\\u53CA\"), mdx(\"p\", null, \"\\u867D\\u7136\\u76EE\\u524D React\\u3001Vue \\u4E3B\\u6D41\\uFF0C\\u4F46 Web Components \\u5728\\u7279\\u5B9A\\u573A\\u666F\\u4E0B\\u6709\\u72EC\\u7279\\u4F18\\u52BF\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u771F\\u6B63\\u7684\\u5C01\\u88C5\"), \"\\uFF1A\\u6837\\u5F0F\\u548C\\u903B\\u8F91\\u5B8C\\u5168\\u9694\\u79BB\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u8DE8\\u6846\\u67B6\\u53EF\\u7528\"), \"\\uFF1A\\u4E0D\\u4F9D\\u8D56\\u4E8E\\u7279\\u5B9A\\u6846\\u67B6\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6D4F\\u89C8\\u5668\\u539F\\u751F\\u652F\\u6301\"), \"\\uFF1A\\u4E0D\\u9700\\u8981\\u989D\\u5916\\u5F15\\u5165\")), mdx(\"h4\", null, \"2. \\u6A21\\u5757\\u5316\\u6807\\u51C6\"), mdx(\"p\", null, \"ES Module \\u5DF2\\u7ECF\\u6210\\u4E3A\\u6807\\u51C6\\uFF0C\\u672A\\u6765\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u4E0D\\u9700\\u8981\\u6253\\u5305\\u5DE5\\u5177\"), \"\\uFF1A\\u6D4F\\u89C8\\u5668\\u76F4\\u63A5\\u652F\\u6301\\u6A21\\u5757\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5F00\\u53D1\\u4F53\\u9A8C\\u63D0\\u5347\"), \"\\uFF1A\\u65E0\\u9700\\u914D\\u7F6E\\u590D\\u6742\\u7684\\u6784\\u5EFA\\u6D41\\u7A0B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6027\\u80FD\\u4F18\\u5316\"), \"\\uFF1A\\u6D4F\\u89C8\\u5668\\u53EF\\u4EE5\\u4F18\\u5316\\u6A21\\u5757\\u52A0\\u8F7D\")), mdx(\"h4\", null, \"3. \\u6E10\\u8FDB\\u5F0F Web \\u5E94\\u7528\"), mdx(\"p\", null, \"\\u7ED3\\u5408 Service Worker\\u3001WebAssembly \\u7B49\\u6280\\u672F\\uFF0C\\u672A\\u6765\\u7684 Web \\u5E94\\u7528\\u5C06\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u63A5\\u8FD1\\u539F\\u751F\\u4F53\\u9A8C\"), \"\\uFF1A\\u79BB\\u7EBF\\u3001\\u63A8\\u9001\\u3001\\u5B89\\u88C5\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u9AD8\\u6027\\u80FD\"), \"\\uFF1AWebAssembly \\u63D0\\u4F9B\\u9AD8\\u6027\\u80FD\\u8BA1\\u7B97\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5E73\\u53F0\\u65E0\\u5173\"), \"\\uFF1A\\u8DE8\\u5E73\\u53F0\\u3001\\u8DE8\\u8BBE\\u5907\")));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}